/* Paleta tomada de la propia app: cromo en grises y color solo donde mide algo. */
:root {
  --bg: #08090a;
  --surface: #131517;
  --surface-2: #1b1e21;
  --line: #262a2e;
  --text: #f3f5f6;
  --muted: #a2a9ae;   /* 6.0:1 en el peor fondo */
  --faint: #949ba1;   /* 5.34:1 sobre la baldosa más clara: WCAG AA */
  --green: #32d74b;
  --yellow: #ffd60a;
  --red: #ff453a;
  --blue: #0a84ff;
  --radius: 14px;
  --max: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Cabecera ─────────────────────────────────────────────────────────── */

header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(160%) blur(14px);
  background: rgba(8, 9, 10, .72);
}
header .wrap { display: flex; align-items: center; gap: 20px; height: 58px; }
.logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: -.02em; font-size: 16px;
}
/* El icono ya trae su propia sombra de macOS: basta con no deformarlo. */
.logo img { width: 26px; height: 26px; display: block; flex: none; }
.logo:hover span { color: #fff; }

@media (max-width: 420px) {
  .logo span { display: none; }   /* en pantalla estrecha manda el icono */
  .logo img { width: 28px; height: 28px; }
}
header nav { margin-left: auto; display: flex; gap: 22px; }
header nav a { color: var(--muted); font-size: 14px; }
header nav a:hover { color: var(--text); }

a { color: inherit; text-decoration: none; }

/* ── Botones ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent; transition: transform .15s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--text); color: #0a0b0c; }
.btn-primary:hover { background: #fff; }
.btn-ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* ── Secciones ────────────────────────────────────────────────────────── */

section { padding: 110px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px;
}
h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.03;
  font-weight: 700; letter-spacing: -.035em; margin-bottom: 22px;
}
h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12;
  font-weight: 700; letter-spacing: -.03em; margin-bottom: 16px;
}
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.lead { font-size: 19px; color: var(--muted); max-width: 44ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* ── Portada ──────────────────────────────────────────────────────────── */

.hero { padding: 96px 0 84px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero .actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero .note { margin-top: 16px; font-size: 13px; color: var(--faint); }

/* Filas alternas, como la referencia. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip > *:first-child { order: 2; }

/* ── Réplica del panel ────────────────────────────────────────────────── */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tile {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px;
}
.tile .label {
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  color: var(--muted); text-transform: uppercase;
}
.tile .value { font-size: 15px; font-weight: 600; margin-top: 2px; }
.tile .cap { font-size: 9.5px; color: var(--faint); }
.meter { height: 4px; border-radius: 99px; background: #33383d; margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 99px; }

.tabs {
  display: flex; gap: 2px; padding: 2px; margin: 12px 0 10px;
  background: #23272b; border-radius: 9px; width: fit-content; margin-inline: auto;
}
.tabs span {
  padding: 5px 14px; font-size: 11px; font-weight: 500;
  color: var(--muted); border-radius: 7px;
}
.tabs .on { background: var(--surface-2); color: var(--text); border: .5px solid #3a3f44; }

.rows { background: #191c1f; border-radius: 12px; overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; font-size: 12px;
  border-bottom: 1px solid #212528;
}
.row:last-child { border-bottom: 0; }
.row .check { width: 14px; height: 14px; border-radius: 99px; border: 1.5px solid var(--faint); flex: none; }
.row .check.on { background: var(--text); border-color: var(--text); }
.row .name { font-weight: 500; }
.row .sub { color: var(--faint); font-size: 10px; }
.row .size { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.cta-row {
  margin-top: 10px; text-align: center; padding: 9px;
  background: var(--surface-2); border: .5px solid #3a3f44;
  border-radius: 9px; font-size: 12px; font-weight: 600;
}

/* ── Rejilla de funciones ─────────────────────────────────────────────── */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.card p { color: var(--muted); font-size: 14.5px; }
.dot { width: 9px; height: 9px; border-radius: 99px; display: inline-block; margin-bottom: 14px; }

/* ── Precio ───────────────────────────────────────────────────────────── */

.price-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 40px; text-align: center; max-width: 460px; margin: 40px auto 0;
}
.price { font-size: 62px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.price sup { font-size: 24px; font-weight: 600; vertical-align: super; }
.price-box ul { list-style: none; text-align: left; margin: 28px 0; display: grid; gap: 10px; }
.price-box li { color: var(--muted); font-size: 15px; padding-left: 24px; position: relative; }
.price-box li::before {
  content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700;
}

/* ── Preguntas ────────────────────────────────────────────────────────── */

details {
  border-bottom: 1px solid var(--line); padding: 20px 0;
}
summary { cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--faint); font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 62ch; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

footer { padding: 44px 0; color: var(--faint); font-size: 13.5px; }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
footer nav { margin-left: auto; display: flex; gap: 20px; }
footer a:hover { color: var(--text); }


}

/* ── Interacción ──────────────────────────────────────────────────────── */

.tabs span {
  display: inline-flex; align-items: center;
  padding: 5px 13px; font-size: 11px; font-weight: 500;
  color: var(--sec); border-radius: 7px;
}


.row .txt { flex: 1; }
.row .ico { font-size: 14px; }
.row .size.ram { min-width: 62px; text-align: right; color: var(--muted); font-weight: 500; }
.row .check { transition: background .15s, border-color .15s; }

.sw {
  width: 26px; height: 15px; border-radius: 99px; background: #3a3f44;
  margin-left: auto; position: relative; flex: none; transition: background .2s;
}
.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 99px; background: #fff;
  transition: transform .2s;
}
.sw.on { background: var(--green); }
.sw.on::after { transform: translateX(11px); }

.cta-row {
  width: 100%; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: background .18s, color .18s;
}

.hint { font-size: 11px; color: var(--faint); text-align: center; margin-top: 9px; }

.meter i, .tile .value { transition: width .5s ease, color .3s; }

/* Aparición al entrar en pantalla */
.js .reveal, .js .card, .js .price-box {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.in, .card.in, .price-box.in { opacity: 1 !important; transform: none !important; }
.card { transition: opacity .6s, transform .6s, border-color .2s; }
.card.in:hover { border-color: #3a4046; transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .card, .price-box { opacity: 1; transform: none; transition: none; }
}


/* ── Móvil ────────────────────────────────────────────────────────────────
   No es la versión de escritorio estrechada: cambian jerarquía, densidad y
   la acción principal, que pasa a una barra fija al alcance del pulgar. */

.mobile-bar { display: none; }

@media (max-width: 860px) {
  :root { --radius: 12px; }

  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  section { padding: 64px 0; }

  /* La navegación de escritorio sobra; queda logo y acción. */
  header nav { display: none; }
  header .wrap { height: 52px; }
  header .btn { margin-left: auto; }

  h1 { font-size: 2.35rem; letter-spacing: -.03em; }
  h2 { font-size: 1.7rem; }
  .lead { font-size: 17px; max-width: none; }

  /* Portada: primero el titular, después la demo. */
  .hero { padding: 44px 0 56px; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 32px; }
  .split.flip > *:first-child { order: 0; }
  .hero .actions { gap: 10px; }
  .hero .actions .btn { flex: 1; justify-content: center; min-height: 48px; }

  .grid { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  .card { padding: 20px; }

  /* ── El panel, rediseñado para el ancho del móvil ── */
  .panel { padding: 11px; border-radius: 16px; }

  /* Cuatro baldosas en fila no caben: dos por dos. */
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { padding: 10px 11px; }
  .tile .value { font-size: 17px; }
  .tile .cap { font-size: 10.5px; }
  .meter { height: 5px; }

  /* Pestañas a lo ancho, con altura de dedo. */
  .tabs { width: 100%; margin: 12px 0 10px; }
  .tabs span { flex: 1; justify-content: center; padding: 9px 4px; font-size: 11.5px; }

  .row { padding: 12px; gap: 12px; min-height: 52px; }
  .row .name { font-size: 13px; }
  .row .sub { font-size: 10.5px; }
  .row .size { font-size: 12px; }
  .row .check { width: 18px; height: 18px; }
  .cta-row { padding: 13px; font-size: 13px; }

  /* Precio: la tarjeta ocupa el ancho y el botón es del tamaño del pulgar. */
  .price-box { padding: 28px 22px; border-radius: 16px; margin-top: 28px; }
  .price { font-size: 52px; }
  .price-box .btn { min-height: 50px; font-size: 16px; }

  details { padding: 18px 0; }
  summary { font-size: 15.5px; }

  footer { padding: 32px 0 96px; }   /* hueco para la barra fija */
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  footer nav { margin-left: 0; }

  /* Acción siempre a mano, sin tener que volver arriba. */
  .mobile-bar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(13, 15, 17, .92);
    backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--line);
  }
  .mobile-bar strong { display: block; font-size: 15px; }
  .mobile-bar span { font-size: 12px; color: var(--muted); }
  .mobile-bar .btn { margin-left: auto; min-height: 44px; padding: 0 22px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 2rem; }
  .tile .value { font-size: 15.5px; }
  .tile .label { font-size: 8.5px; }
  .tabs span { font-size: 10.5px; padding: 9px 2px; }
  .row .sub { display: none; }        /* en 375 px el subtítulo solo estorba */
  .price { font-size: 46px; }
}


/* ── Fidelidad con la app ─────────────────────────────────────────────────
   Las medidas de aquí abajo son las del panel real: radio 10 en las baldosas,
   12 en la lista, borde de medio punto y sombra corta. Si cambia la app,
   cambia esto. */

.panel {
  background: linear-gradient(180deg, #17191c 0%, #121417 100%);
  border: 1px solid #2b2f34; border-radius: 18px; padding: 14px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Baldosas: material translúcido, filo claro arriba y sombra que las levanta. */
.tile {
  background: linear-gradient(180deg, #23272b 0%, #1d2124 100%);
  border: .5px solid rgba(255,255,255,.12);
  box-shadow: 0 3px 6px rgba(0,0,0,.28);
  border-radius: 10px;
}
.tile .label { letter-spacing: .07em; font-weight: 700; }
.tile .value { font-weight: 600; letter-spacing: -.01em; }

/* Carril hundido y pastilla elevada, como el selector de la app. */
.tabs { background: rgba(255,255,255,.07); padding: 2px; border-radius: 9px; }
.tabs span.on {
  background: linear-gradient(180deg, #2a2e33 0%, #232729 100%);
  border: .5px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}

/* Un solo panel con separadores finos sangrados, no tarjetas sueltas. */
.rows {
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.row { border-bottom: .5px solid rgba(255,255,255,.06); }
.row:last-of-type { border-bottom: 0; }
.row .check { border-radius: 99px; border: 1.5px solid rgba(255,255,255,.28); }
.row .check.on { background: var(--text); border-color: var(--text); position: relative; }
.row .check.on::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 8px; border: solid #101214;
  border-width: 0 1.6px 1.6px 0; transform: rotate(42deg) translate(-1px,-1px);
}
/* La selección se señala una vez, no tres. */

/* El botón es del mismo material que las pestañas, sin azul de sistema. */
.cta-row {
  background: linear-gradient(180deg, #2a2e33 0%, #232729 100%);
  border: .5px solid rgba(255,255,255,.16);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  border-radius: 9px; color: var(--text);
}

/* ── Más carácter ─────────────────────────────────────────────────────── */

.glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(10,132,255,.14), transparent 62%),
    radial-gradient(620px 380px at 12% 2%, rgba(50,215,75,.09), transparent 60%);
}
main, header, footer { position: relative; z-index: 1; }

h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--green) 0%, #7ee8a2 42%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Rótulo con filete, para que las secciones tengan entrada. */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--line); flex: none;
}
.wrap[style*="center"] .eyebrow { justify-content: center; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  position: relative; overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px 160px at 50% -30%, rgba(255,255,255,.07), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.card.in:hover::after { opacity: 1; }

.price-box {
  background:
    radial-gradient(520px 260px at 50% -10%, rgba(10,132,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.price { background: linear-gradient(180deg, #fff, #b9c0c5);
         -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn-primary { box-shadow: 0 6px 22px rgba(255,255,255,.1); }
summary:hover { color: #fff; }


/* ── Navegación ───────────────────────────────────────────────────────── */

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--text); color: #0a0b0c; padding: 10px 18px; border-radius: 8px;
}
.skip:focus { left: 20px; }

/* Progreso de lectura: barra finísima en el borde superior. */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 30;
  width: 0; background: linear-gradient(90deg, var(--green), var(--blue));
  transition: width .1s linear;
}

header nav a {
  position: relative; padding: 6px 0;
  transition: color .2s;
}
header nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
header nav a.active { color: var(--text); }
header nav a.active::after { transform: scaleX(1); }

.lang {
  display: flex; gap: 1px; padding: 2px; margin-left: 4px;
  background: rgba(255,255,255,.07); border-radius: 8px;
}
.lang a {
  padding: 4px 9px; font-size: 12px; font-weight: 600;
  color: var(--muted); border-radius: 6px;
}
.lang a.on { background: var(--surface-2); color: var(--text); }
.lang a:hover { color: var(--text); }

/* Vuelta arriba, aparece al bajar. */
.top {
  position: fixed; right: 22px; bottom: 22px; z-index: 25;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .25s, transform .25s, color .2s;
}
.top.on { opacity: 1; pointer-events: auto; transform: none; }
.top:hover { color: var(--text); }

@media (max-width: 860px) {
  /* En vez de esconder la navegación, se convierte en tiras deslizables. */
  header nav {
    display: flex; position: fixed; top: 52px; left: 0; right: 0; z-index: 9;
    gap: 0; overflow-x: auto; scrollbar-width: none;
    padding: 8px 16px; background: rgba(8,9,10,.9);
    backdrop-filter: saturate(160%) blur(14px);
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a {
    flex: none; padding: 6px 13px; font-size: 13px; white-space: nowrap;
    border-radius: 99px;
  }
  header nav a::after { display: none; }
  header nav a.active { background: rgba(255,255,255,.09); }
  main { padding-top: 45px; }          /* hueco de la tira de navegación */
  .top { display: none; }              /* la barra inferior ya ocupa esa esquina */
  .lang a { padding: 5px 10px; }
}


/* ── Accesibilidad ────────────────────────────────────────────────────── */

/* Foco visible en todo lo interactivo. Sin esto no se puede navegar con
   teclado, y Lighthouse lo marca. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* El estado de las casillas y los interruptores se anuncia por ARIA, pero
   también tiene que verse sin depender solo del color. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pane.on { animation: none; }
  .progress { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── Grises reales del panel ──────────────────────────────────────────────
   macOS dibuja los niveles secundario y terciario como blanco con opacidad,
   no como grises fijos. Subirlos para cumplir contraste hacía que el panel
   dejara de parecerse a la app. Aquí se restauran los valores del sistema,
   acotados al panel; el texto de la página sigue cumpliendo AA. */

.panel {
  --sec: rgba(255,255,255,.55);   /* secondaryLabelColor */
  --ter: rgba(255,255,255,.26);   /* tertiaryLabelColor */
  --qua: rgba(255,255,255,.10);   /* quaternaryLabelColor */
}
.panel .tile .label { color: var(--sec); }
.panel .tile .cap   { color: var(--ter); }
.panel .row .sub    { color: var(--ter); }
.panel .tabs span.on { color: var(--text); }
.panel .meter { background: var(--qua); }
.panel .hint { color: var(--ter); }

.row.sel { background: rgba(255,255,255,.055); }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 7px; }

/* Icono gris de la fila, como el símbolo SF de la app. */
.row .glyph { width: 18px; height: 18px; color: var(--sec); flex: none; }
.row .glyph svg { width: 100%; height: 100%; display: block; }
.tabs span svg { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }

/* Contador de elementos: cápsula pequeña a la izquierda del tamaño. */
.row .count {
  font-size: 9.5px; font-weight: 500; color: var(--sec);
  padding: 1.5px 5px; border-radius: 99px; background: var(--qua);
  font-variant-numeric: tabular-nums;
}

/* En la app el separador va sangrado hasta el texto, no de borde a borde. */
.rows .row { border-bottom: 0; position: relative; }
.rows .row + .row::before {
  content: ""; position: absolute; top: 0; left: 46px; right: 0;
  height: .5px; background: rgba(255,255,255,.07);
}

.row { align-items: center; }
.row .txt { min-width: 0; }
.row .name, .row .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


@media (max-width: 420px) {
  .rows .row + .row::before { left: 40px; }
}


/* ── Impresión y exportación a PDF ────────────────────────────────────────
   El resplandor de fondo es un degradado radial fijo: al imprimir se rasteriza
   como una mancha azul sólida. Fuera, junto al resto de adornos flotantes. */

@media print {
  .glow, .progress, .top, .mobile-bar { display: none !important; }

  header { position: static; backdrop-filter: none; }
  header nav, .lang { display: none; }

  /* En papel no hay nada que desplegar: se muestran todas las respuestas. */
  details > p { display: block !important; }
  summary::after { content: ""; }

  section { padding: 34px 0; break-inside: avoid; }
  .card, .price-box, .panel { break-inside: avoid; }

  /* Sin animación de entrada: si no, las secciones salen en blanco. */
  .reveal, .card, .price-box { opacity: 1 !important; transform: none !important; }

  /* Los fondos oscuros y las barras de color son la identidad: se conservan. */
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #8b9298; }
  a[href^="#"]::after { content: ""; }
}


/* ── Captura de la app ────────────────────────────────────────────────────
   Es una captura real, tomada sobre fondo liso para que el material
   translúcido del panel no arrastre el escritorio. La sombra la pone el CSS,
   así se adapta al fondo de la página. */

.shot {
  width: 100%; max-width: 440px; height: auto; display: block;
  border-radius: 14px;
  filter: drop-shadow(0 34px 70px rgba(0,0,0,.62));
}

@media (max-width: 860px) {
  .shot { margin: 0 auto; max-width: 380px; }
}


/* ── Cabecera reducida al icono y la acción ───────────────────────────────
   Sin navegación ni conmutador: en una página de una sola columna los enlaces
   de sección estorban más de lo que ayudan, y el botón queda siempre a mano
   porque la cabecera es fija. */

header .wrap { height: 66px; }
.logo img { width: 38px; height: 38px; }
header nav, header .lang { display: none; }
header .btn { margin-left: auto; }

/* El conmutador de idioma vive ahora en el pie. */
footer .lang { margin-left: 0; }
footer nav { margin-left: auto; }

.mobile-bar { display: none !important; }

@media (max-width: 860px) {
  header .wrap { height: 60px; }
  .logo img { width: 36px; height: 36px; }
  main { padding-top: 0; }
  footer { padding: 32px 0; }
  footer .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 420px) {
  .logo img { width: 34px; height: 34px; }
}


/* Botón de la cabecera: siempre a la derecha y en cápsula. */
header .btn {
  margin-left: auto;
  border-radius: 99px;
  padding: 9px 22px;
}


/* ── Cabecera fija de verdad ──────────────────────────────────────────────
   `sticky` depende de que ningún ancestro tenga overflow o transform; `fixed`
   no depende de nada. El icono y el botón se quedan quietos siempre. */

header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  /* `main, header, footer { z-index: 1 }` le había quitado su nivel y el
     contenido le pasaba por encima al desplazar. */
  z-index: 50 !important;
}
/* El contenido arranca por debajo de la cabecera, que ya no ocupa sitio. */
body { padding-top: 78px; }

header .wrap { height: 78px; }
.logo img { width: 48px !important; height: 48px !important; }

@media (max-width: 860px) {
  body { padding-top: 66px; }
  header .wrap { height: 66px; }
  .logo img { width: 42px !important; height: 42px !important; }
}

@media (max-width: 420px) {
  body { padding-top: 60px; }
  header .wrap { height: 60px; }
  .logo img { width: 38px !important; height: 38px !important; }
}


/* ── Sección de disco ─────────────────────────────────────────────────────
   Una cifra grande hace el trabajo principal; la barra es la prueba. Una sola
   serie destacada: nada de repartir colores entre categorías, que ni se
   distinguirían ni dirían nada que la lista de rutas no diga mejor. */

.disk .wrap { max-width: 900px; }

.figure { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 26px; }
.huge {
  font-size: clamp(4rem, 13vw, 8.5rem); line-height: .86; font-weight: 700;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, #fff 20%, #7c848a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.huge span { font-size: .32em; letter-spacing: -.02em; margin-left: .08em; }
.huge-cap { font-size: 17px; color: var(--muted); }

/* Barra: extremos redondeados de 4px, separación de 2px entre tramos. */
.diskbar { display: flex; gap: 2px; height: 14px; margin-bottom: 14px; }
.seg { border-radius: 3px; }
.seg.used { background: #2f353b; }
.seg.junk { background: var(--green); }
.seg.free { background: #191d21; }

.diskkey { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.diskkey span { display: inline-flex; align-items: center; gap: 8px; }
.diskkey i { width: 9px; height: 9px; border-radius: 2px; }
.k-used { background: #2f353b; } .k-junk { background: var(--green); } .k-free { background: #191d21; }

/* Rutas reales en monoespaciada: es lo que un desarrollador reconoce de un
   vistazo, y dice más que seis tarjetas con iconos. */
.specs { list-style: none; margin: 44px 0 0; counter-reset: n; }
.specs li {
  display: grid; grid-template-columns: 1fr 120px auto; align-items: center;
  gap: 20px; padding: 15px 0; border-top: 1px solid var(--line);
}
.specs li:last-child { border-bottom: 1px solid var(--line); }
.specs code {
  font: 400 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); word-break: break-all;
}
.specs b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.wgt { display: block; height: 4px; border-radius: 2px; background: #23282d; }
.wgt i { display: block; height: 100%; border-radius: 2px; background: var(--green); }
.specnote { margin-top: 16px; font-size: 13px; color: var(--faint); }

@media (max-width: 700px) {
  .specs li { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .wgt { grid-column: 1 / -1; order: 3; }
  .specs code { font-size: 12px; }
  .figure { gap: 10px; }
}


/* ── Sin líneas separadoras ───────────────────────────────────────────────
   La separación la da el espacio, no un filete gris entre cada bloque. */

section { border-top: 0; }
details { border-bottom: 0; padding: 14px 0; }
.specs li, .specs li:last-child { border-top: 0; border-bottom: 0; }

/* Al perder el filete, las filas necesitan su propio aire y un realce al pasar. */
.specs { margin-top: 36px; }
.specs li { padding: 13px 14px; border-radius: 10px; transition: background .18s; }
.specs li:hover { background: rgba(255,255,255,.035); }

details {
  border-radius: 10px; padding: 14px 14px;
  transition: background .18s;
}
details:hover { background: rgba(255,255,255,.03); }
details[open] { background: rgba(255,255,255,.035); }


/* ── Etiqueta de los botones de compra ────────────────────────────────────
   El importe manda y el impuesto es una aclaración: en la misma línea pero
   más pequeño y apagado, para que no parta el botón en dos renglones. */

.hero .actions .btn { white-space: nowrap; }


@media (max-width: 620px) {
  /* Apilados y a todo el ancho: más fáciles de pulsar y sin partir el texto. */
  .hero .actions { flex-direction: column; }
  .hero .actions .btn { width: 100%; }
}


/* ── Botones de compra ────────────────────────────────────────────────────
   El precio con impuestos va completo en el botón: anunciar un importe sin
   indicarlo es precio engañoso frente a consumidores. Para que quepa en una
   línea, en pantallas estrechas los botones se apilan a todo el ancho y el
   cuerpo baja un punto. */

.hero .actions .btn { white-space: nowrap; }

@media (max-width: 620px) {
  .hero .actions { flex-direction: column; }
  .hero .actions .btn { width: 100%; font-size: 14.5px; }
  .price-box .btn { font-size: 14.5px; padding-inline: 12px; }
}

@media (max-width: 380px) {
  .hero .actions .btn, .price-box .btn { font-size: 13.5px; }
}


/* Todos los botones con la misma forma que el de la cabecera: cápsula. */
.btn { border-radius: 99px; }
.hero .actions .btn { min-height: 50px; }
.price-box .btn { border-radius: 99px; }


/* ── Los dos botones de la portada, en fila también en móvil ──────────────
   El principal se lleva más ancho porque su texto es el que no se puede
   recortar: lleva el importe y los impuestos. */

@media (max-width: 620px) {
  .hero .actions { flex-direction: row; flex-wrap: nowrap; gap: 9px; }
  .hero .actions .btn { width: auto; font-size: 13.5px; padding-inline: 14px; }
  .hero .actions .btn-primary { flex: 1.75; }
  .hero .actions .btn-ghost { flex: 1; }
}

@media (max-width: 370px) {
  /* Ya no cabe en una línea: se permite partir antes que recortar el precio. */
  .hero .actions .btn { white-space: normal; line-height: 1.25; font-size: 12.5px; }
}