/* Centinela web: one stylesheet for every page.
   Colors come from the logo: shield black, signal red and steel. Light and dark follow the system.
   Shape rule: panels, cards and images use 16px corners; buttons, tabs, badges and icon chips are pills.
   Breakpoints are in em so they follow the user's text size. */

:root {
  color-scheme: light dark;
  --bg: #f4f4f5;
  --raise: #ffffff;
  --sunk: #e9e9ec;
  --line: #d9d9de;
  --control-line: #80838a; /* borders of controls: at least 3:1 against the page */
  --text: #141518;
  --muted: #55585f;
  --red: #c7282f;          /* fills and buttons: 5.5:1 with white text */
  --red-hover: #ad2128;
  --red-deep: #8f1a20;
  --red-ink: #b9232a;      /* red text on the page background */
  --steel: #8b8e95;
  --scroll-thumb: #8a8d94;
  --shadow: 0 1px 2px rgb(20 21 24 / .06), 0 18px 40px -18px rgb(20 21 24 / .22);
  --r: 16px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);

  accent-color: var(--red);
  scrollbar-color: var(--scroll-thumb) var(--bg);
  scrollbar-width: auto; /* macOS only applies scrollbar-color with an explicit scrollbar-width */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0e10;
    --raise: #15171a;
    --sunk: #0a0b0d;
    --line: #272a30;
    --control-line: #62666e;
    --text: #ecedef;
    --muted: #a3a6ad;
    --red-ink: #ff5a60;
    --steel: #c2c1c3;
    --scroll-thumb: #5f636b;
    --shadow: 0 0 0 1px rgb(255 255 255 / .03), 0 24px 60px -24px rgb(0 0 0 / .8);
  }
}

/* More contrast on request: stronger separators and secondary text. */
@media (prefers-contrast: more) {
  :root { --line: #8a8d94; --control-line: #55585f; --muted: #3d4046; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --line: #6b6f77; --control-line: #9a9da4; --muted: #c6c8cd; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code { font-family: var(--mono); }

::selection { background: color-mix(in srgb, var(--red) 32%, transparent); }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}

.skip {
  position: fixed; left: 10px; top: 10px; z-index: 40;
  padding: 8px 16px; border-radius: 999px; background: var(--raise); color: var(--text);
}

/* Icons (Phosphor sprite inlined in the page; they take the text color) */

.icon { flex: none; width: 1.2em; height: 1.2em; fill: currentColor; }

/* Header: transparent over the hero, a frosted bar once it sticks (where the browser can tell). */

.site-head { position: sticky; top: 0; z-index: 20; view-transition-name: site-head; }
.bar {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transition: background-color .3s, border-color .3s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar { background: var(--bg); }
}
@supports (container-type: scroll-state) {
  .site-head { container-type: scroll-state; container-name: site-head; }
  .bar { border-bottom-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  @container site-head scroll-state(stuck: top) {
    .bar {
      border-bottom-color: var(--line);
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      -webkit-backdrop-filter: saturate(160%) blur(14px);
      backdrop-filter: saturate(160%) blur(14px);
    }
  }
}
.bar .wrap { display: flex; align-items: center; gap: 28px; min-height: 4rem; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; }

.nav { display: flex; gap: 24px; margin-left: auto; font-size: .94rem; scroll-target-group: auto; }
.nav a { color: var(--muted); text-decoration: underline 2px transparent; text-underline-offset: 8px; transition: color .2s, text-decoration-color .2s; }
.nav a:hover { color: var(--text); }
/* Section in view: color plus an underline, so it does not rely on color alone. */
.nav a:is(:target-current, .\:target-current) { color: var(--text); text-decoration-color: var(--red); }

@media (max-width: 53.75em) {
  .nav { display: none; }
  .bar .btn { margin-left: auto; }
}

/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: 8px 22px; border: 1px solid transparent; border-radius: 999px;
  font: 600 .98rem/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--control-line); }
.btn-ghost:hover { border-color: var(--text); }
.btn-sm { min-height: 38px; padding: 6px 16px; font-size: .9rem; }

.textlink { color: var(--red-ink); font-weight: 600; text-decoration: none; }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hero */

.hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); overflow: clip; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -20%; right: -15%; width: min(900px, 90vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(199 40 47 / .18), transparent);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.eyebrow { margin-bottom: 18px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); }
.hero h1 { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.6rem); font-weight: 750; letter-spacing: -.035em; }
.lead { margin-top: 20px; max-width: 44ch; font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .actions { margin-top: 32px; }
.hero-logo { justify-self: center; width: min(300px, 60vw); filter: drop-shadow(0 28px 56px rgb(199 40 47 / .28)); }

@media (max-width: 53.75em) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-logo { order: -1; justify-self: start; width: 132px; }
}

/* Product shot and facts */

.shot { margin: clamp(40px, 6vw, 72px) 0 0; }
.shot img { width: 100%; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.shot figcaption { margin-top: 12px; font-size: .88rem; color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
@media (max-width: 47.5em) { .facts { grid-template-columns: 1fr; gap: 18px; } }

/* Sections */

.section { padding-top: clamp(72px, 10vw, 128px); }
.section-title { max-width: 24ch; font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.7rem); font-weight: 720; }
.section-lead { margin-top: 16px; max-width: 62ch; font-size: 1.08rem; color: var(--muted); }

/* Why: bento with five tiles */

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 16px; margin-top: 44px; }
.tile {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden;
  padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise);
}
.tile h3 { font-size: 1.3rem; }
.tile p { color: var(--muted); }
.chip {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: auto; border-radius: 999px;
  background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-ink);
}
.chip .icon { width: 1.4rem; height: 1.4rem; }
.tile-live { grid-column: span 2; grid-row: span 2; justify-content: flex-start; padding: 0; }
.tile-live img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 72% 20%; border-bottom: 1px solid var(--line); }
.tile-live .tile-body { display: grid; gap: 10px; padding: 28px; }
.tile-live .chip { margin-bottom: 6px; }
.tile-private { grid-column: span 2; border-color: transparent; background: linear-gradient(135deg, var(--red-deep), var(--red)); color: #fff; }
.tile-private p { color: rgb(255 255 255 / .9); }
.tile-private .chip { background: rgb(255 255 255 / .16); color: #fff; }
.tile-systems {
  grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px;
  background: linear-gradient(120deg, var(--raise) 30%, var(--sunk));
}
.tile-systems .tile-body { display: grid; gap: 10px; max-width: 46ch; }
.tile-systems .chip { margin-bottom: 6px; }
.os-names { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 4vw, 48px); margin: 0; padding: 0; list-style: none; font-size: clamp(1.4rem, .9rem + 2.2vw, 2.6rem); font-weight: 750; letter-spacing: -.03em; color: var(--steel); }
.os-names li { display: inline-flex; align-items: center; gap: .3em; }
.os-names .icon { width: .95em; height: .95em; }

@media (max-width: 60em) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-live { grid-row: auto; }
}
@media (max-width: 37.5em) {
  .bento { grid-template-columns: 1fr; }
  .tile-live, .tile-private { grid-column: auto; }
}

/* Features in two groups */

.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; margin-top: 48px; }
.group h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 1.05rem; letter-spacing: -.01em; }
.group dl { display: grid; gap: 22px; margin: 0; padding-top: 22px; }
.group dt { font-weight: 650; }
.group dd { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 47.5em) { .groups { grid-template-columns: 1fr; } }

/* Steps */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.steps li { position: relative; padding-top: 22px; border-top: 2px solid var(--line); }
.steps li::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--red); }
.steps h3 { margin-bottom: 8px; font-size: 1.15rem; }
.steps p { color: var(--muted); }
.note { margin-top: 36px; padding: 18px 22px; border-radius: var(--r); background: var(--sunk); color: var(--muted); font-size: .96rem; }
.note strong { color: var(--text); }
@media (max-width: 47.5em) { .steps { grid-template-columns: 1fr; } }

/* Downloads */

.downloads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.dl {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise);
  transition: border-color .2s, box-shadow .3s var(--ease);
}
.dl-os { width: 2rem; height: 2rem; margin-bottom: 10px; color: var(--text); }
.dl h3 { font-size: 1.2rem; }
.dl .req { font-size: .93rem; color: var(--muted); }
.dl .file { margin-top: auto; padding-top: 18px; font: .78rem/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.dl .btn { width: 100%; margin-top: 12px; }
.dl .badge { display: none; }
.dl.is-yours { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.dl.is-yours .badge {
  display: inline-block; position: absolute; top: -12px; left: 20px;
  padding: 3px 11px; border-radius: 999px; background: var(--red); color: #fff; font-size: .76rem; font-weight: 700;
}
@media (max-width: 62.5em) { .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }
@media (max-width: 35em) { .downloads { grid-template-columns: 1fr; } }

.hint { margin-top: 16px; font-size: .92rem; color: var(--muted); }
.dl-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: .94rem; }
.dl-links a { color: var(--muted); text-underline-offset: 3px; }
.dl-links a:hover { color: var(--text); }

/* Install tabs (without JavaScript every panel shows, each with its heading) */

.install { margin-top: 56px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); }
.install-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--sunk); }
.install-head h3 { font-size: 1.1rem; }
.tablist { display: none; gap: 4px; }
.js .tablist { display: flex; }
.tab {
  display: inline-flex; align-items: center; gap: .45em; padding: 8px 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: 600 .94rem/1.2 var(--font); cursor: pointer; transition: background-color .2s, color .2s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--raise); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.panel { padding: 26px 24px 28px; }
.panel + .panel { border-top: 1px solid var(--line); }
.js .panel + .panel { border-top: 0; }
.panel h4 { margin-bottom: 14px; font-size: 1.05rem; }
.js .panel h4 { display: none; }
.panel ol { display: grid; gap: 12px; margin: 0; padding-left: 1.3em; color: var(--muted); }
.panel li strong { color: var(--text); }
.panel li::marker { color: var(--red-ink); font-weight: 700; }

.cmd { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; padding: 8px 8px 8px 16px; border-radius: var(--r); background: var(--sunk); }
.cmd code { flex: 1; overflow-x: auto; font-size: .9rem; color: var(--text); white-space: nowrap; }
.copy { display: none; }
.js .copy { display: inline-flex; }

/* Privacy */

.privacy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
.privacy-grid .textlink { display: inline-block; margin-top: 22px; }
.privacy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; margin: 0; }
.privacy-list dt { display: flex; align-items: center; gap: 12px; font-weight: 650; }
.privacy-list dt::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--red); }
.privacy-list dd { margin: 6px 0 0 28px; color: var(--muted); }
@media (max-width: 56.25em) { .privacy-grid { grid-template-columns: 1fr; } }
@media (max-width: 35em) { .privacy-list { grid-template-columns: 1fr; } }

/* FAQ */

.faq { max-width: 820px; margin-top: 36px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 20px 44px 20px 0; font-size: 1.06rem; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; top: 50%; right: 8px; width: 9px; height: 9px;
  border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { max-width: 68ch; padding-bottom: 22px; color: var(--muted); }

/* Support */

.support {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center;
  padding: clamp(30px, 5vw, 56px); border: 1px solid var(--line); border-radius: var(--r);
  background: radial-gradient(120% 160% at 100% 0%, rgb(199 40 47 / .2), transparent 55%), var(--raise);
}
.support .section-lead { margin-top: 12px; }
@media (max-width: 56.25em) { .support { grid-template-columns: 1fr; } }

/* Footer */

.site-foot { margin-top: clamp(72px, 10vw, 128px); padding: 56px 0 36px; border-top: 1px solid var(--line); font-size: .94rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand p { max-width: 36ch; margin-top: 14px; color: var(--muted); }
.foot-grid h2 { margin-bottom: 12px; font-size: .95rem; letter-spacing: 0; }
.foot-grid ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.foot-grid a { color: var(--muted); text-decoration: none; }
.foot-grid a:hover, .foot-grid a[aria-current="page"] { color: var(--text); }
.foot-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 47.5em) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* Legal pages */

.legal { padding-top: clamp(44px, 7vw, 88px); }
.legal .wrap { max-width: 840px; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 720; }
.legal .updated { margin-top: 10px; color: var(--muted); }
.legal .summary { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); }
.legal h2 { margin: 44px 0 12px; font-size: 1.3rem; }
.legal p, .legal li, .legal dd { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 1.2em; }
.legal strong, .legal dt { color: var(--text); }
.legal a { color: var(--red-ink); text-underline-offset: 3px; }
.legal dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 14px 0 0; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0; }
@media (max-width: 35em) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }

/* Data the owner still has to fill in: impossible to miss. */
mark.pendiente { padding: 0 4px; border-radius: 4px; background: #ffe066; color: #141518; }

/* Motion: only for people who have not asked for less of it. */

@media (prefers-reduced-motion: no-preference) {
  /* Fade between this site's pages. */
  @view-transition { navigation: auto; }

  /* The hero comes in once, on load (the screenshot does not: it is the main image and must paint at once). */
  @keyframes rise { from { opacity: 0; translate: 0 1rem; } }
  .intro { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 90ms); }

  /* Sections fade in as they scroll into view; decorative, so browsers without scroll timelines just show them. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes reveal { from { opacity: 0; translate: 0 1.5rem; } }
    .reveal {
      animation: reveal auto linear backwards;
      animation-timeline: view();
      animation-range: entry calc(var(--d, 0) * 8%) entry calc(75% + var(--d, 0) * 8%);
    }
  }

  /* FAQ answers open and close smoothly where the browser can animate to auto. */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .tab, .dl, .nav a, .bar, .faq summary::after { transition: none; }
}

/* Windows high contrast: keep the edges that backgrounds and shadows drew. */

@media (forced-colors: active) {
  .btn, .tile, .tile-private, .dl, .chip, .badge { border: 1px solid CanvasText; }
  .dl.is-yours, .tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}