:root {
  color-scheme: dark;
  --bg: #141210;
  --panel: #1d1a17;
  --line: #393127;
  --gold: #dfb767;
  --text: #f1e9da;
  --muted: #b3a797;
  font-family: Segoe UI, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
html { scrollbar-color: #705631 var(--bg); scrollbar-width: thin; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at top right, #30281c40, transparent 60%), var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, serif; font-weight: normal; }
h1 { font-size: clamp(28px, 3.5vw, 42px); margin-bottom: 0; letter-spacing: -.8px; }
h2 { font-size: 30px; line-height: 1.12; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 32px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 13px; letter-spacing: 2.6px; }
.brand small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; letter-spacing: 1.8px; }
.brand-mark { display: block; width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.topbar nav { display: flex; gap: 28px; font-size: 12px; color: var(--muted); }
.topbar nav a { padding: 8px 0; border-bottom: 1px solid transparent; }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--gold); }
.topbar nav a[aria-current] { border-bottom-color: var(--gold); }
.alpha-badge, .tag { font-size: 9px; letter-spacing: 1.6px; color: var(--gold); border: 1px solid #705631; padding: 6px 9px; white-space: nowrap; }
main { max-width: 1400px; margin: auto; padding: 32px; }
.home-main { padding-top: 0; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; margin-bottom: 12px; }
.build-label { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.6; }
.carousel { position: relative; overflow: hidden; background: #1c211b; isolation: isolate; }
.slide { position: relative; min-height: clamp(310px, 34vw, 420px); display: none; }
.slide.is-active { display: block; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; z-index: -2; }
.slide:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #141210f2 0%, #141210b0 36%, #14121010 78%), linear-gradient(0deg, #141210, transparent 45%); z-index: -1; }
.slide-copy { padding: 64px 40px 84px; max-width: 560px; }
.slide h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -1px; margin-bottom: 18px; text-wrap: balance; }
.slide-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.75; color: #ded6c8; max-width: 350px; }
.text-link { color: var(--gold); font-size: 12px; font-weight: 600; display: inline-flex; gap: 20px; align-items: center; }
.text-link:hover { color: #ffe0a0; }
.carousel-controls { position: absolute; left: 40px; right: 32px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.slide-dots { display: flex; gap: 6px; }
.slide-dots button { width: 28px; height: 28px; border: 0; background: none; position: relative; }
.slide-dots button:after { content: ''; position: absolute; width: 18px; height: 2px; left: 5px; top: 13px; background: #ffffff60; }
.slide-dots button[aria-pressed=true]:after { background: var(--gold); }
.arrows { display: flex; align-items: center; gap: 12px; }
.arrows button { width: 30px; height: 30px; background: #14121080; border: 1px solid #ffffff30; border-radius: 2px; }
.arrows button:hover { border-color: var(--gold); color: var(--gold); }
.arrows span { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 32px; margin-top: 8px; }
.patch-panel { padding: 24px 0; border-top: 1px solid var(--line); min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.section-heading .eyebrow { margin: 0; }
.patch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.patch-meta code { color: var(--gold); font-size: 11px; }
.patch-title { font-family: Georgia, serif; font-size: 23px; line-height: 1.35; margin-bottom: 12px; font-weight: normal; overflow-wrap: anywhere; }
.patch-summary { font-size: 13px; line-height: 1.7; color: var(--muted); }
.patch-details { margin-top: 14px; }
.patch-details summary { cursor: pointer; color: var(--gold); font-size: 12px; padding: 5px 0; }
.patch-details[open] summary { margin-bottom: 16px; }
.patch-group h3 { font-size: 12px; color: var(--gold); margin: 18px 0 8px; }
.patch-group ul { padding-left: 18px; margin: 0; color: #d2c8b8; font-size: 13px; line-height: 1.75; }
.patch-group li { margin-bottom: 5px; }
.all-changes { margin-top: 20px; }
.journey-panel { padding: 24px 0 24px 28px; border-top: 1px solid var(--line); position: relative; }
.journey-panel:before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.journey-panel h2 { font-size: 25px; margin-bottom: 12px; }
.journey-panel > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
.journey-panel .journey-note { font-size: 11px !important; }
.muted { color: var(--muted); }
footer { max-width: 1400px; margin: auto; display: flex; justify-content: space-between; gap: 20px; padding: 18px 32px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: 1px; }
footer a:hover { color: var(--gold); }
.history-intro { color: var(--muted); font-size: 14px; line-height: 1.7; }
.change-history { max-width: 900px; display: grid; gap: 20px; }
.history-entry { padding: 28px; border: 1px solid var(--line); background: var(--panel); scroll-margin-top: 24px; }
.history-entry h2 { margin: 12px 0; }
.history-entry:target { border-color: var(--gold); }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px; background: var(--gold); color: var(--bg); z-index: 10; }
.skip-link:focus { top: 10px; }
.noscript { padding: 20px 32px; color: var(--muted); }
.noscript a { text-decoration: underline; }
/* La ventana aporta sus propios controles de instalación bajo la webview. */
.embedded .topbar { min-height: 70px; padding-top: 12px; padding-bottom: 12px; }
.embedded .brand small, .embedded footer, .embedded .journey-note { display: none; }
.embedded .home-main { padding-bottom: 0; }
.embedded .slide { min-height: clamp(290px, 47vh, 380px); }
.embedded .slide-copy { padding-top: 40px; padding-bottom: 70px; }
@media (max-width: 800px) {
  .topbar { padding: 16px 20px; flex-wrap: wrap; gap: 16px; }
  .topbar nav { order: 3; width: 100%; justify-content: space-between; gap: 12px; }
  main { padding: 24px 20px; }
  .home-main { padding-top: 0; }
  .content-grid { grid-template-columns: 1fr; gap: 0; }
  .page-heading { align-items: start; flex-direction: column; }
  .slide-copy { padding: 36px 24px 80px; }
  .carousel-controls { left: 24px; right: 20px; }
  .slide:after { background: linear-gradient(90deg, #141210ed, #14121060), linear-gradient(0deg, #141210, transparent); }
  .journey-panel { padding-left: 0; }
  .journey-panel:before { display: none; }
  .history-entry { padding: 24px; }
  footer { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (min-width: 801px) and (max-height: 560px) {
  .embedded .slide { min-height: 240px; }
  .embedded .slide-copy { max-width: 560px; padding: 24px 32px 58px; }
  .embedded .slide h2 { font-size: 32px; margin-bottom: 10px; }
  .embedded .slide-copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.5; margin-bottom: 10px; max-width: 440px; }
  .embedded .slide-copy .eyebrow { font-size: 9px; margin-bottom: 8px; }
  .embedded .patch-panel, .embedded .journey-panel { padding-top: 16px; padding-bottom: 16px; }
  .embedded .patch-title { font-size: 20px; }
}