/* CuyCleaner · sitio
   Tinta índigo, acento caramelo (el pelaje del cuy), verde solo para «recuperable».
   Display: Bricolage Grotesque · Texto: Figtree · Datos: JetBrains Mono */

:root {
  --fondo: #f3f5f9;
  --superficie: #ffffff;
  --superficie-2: #e9edf5;
  --tinta: #172554;
  --texto: #1d2436;
  --suave: #56607a;
  --tenue: #8a93a8;
  --borde: #d9dfea;
  --acento: #c9661f;            /* caramelo de cuy, ajustado para contraste sobre claro */
  --acento-suave: #f6e3d3;
  --sobre-acento: #ffffff;
  --verde: #1f8a5b;
  --verde-suave: #dcf1e6;
  /* Segmentos de la barra de almacenamiento */
  --seg-sistema: #9aa4bb;
  --seg-apps: #4c6bd6;
  --seg-cache: #c9661f;
  --seg-dev: #8a5cd1;
  --seg-descargas: #d4a02a;
  --seg-libre: #e3e8f1;

  --f-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --f-texto: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.3125rem;
  --t-xl: clamp(1.75rem, 3.2vw, 2.375rem);
  --t-xxl: clamp(2.5rem, 6.4vw, 4.5rem);

  --radio: 10px;
  --ancho: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0d1321;
    --superficie: #151d30;
    --superficie-2: #1c2640;
    --tinta: #e6ebff;
    --texto: #dde3f0;
    --suave: #a3adc4;
    --tenue: #6f7a94;
    --borde: #27324d;
    --acento: #ec8b45;
    --acento-suave: #3a2616;
    --sobre-acento: #1a0f06;
    --verde: #4cc38a;
    --verde-suave: #14301f;
    --seg-sistema: #5d6883;
    --seg-apps: #6f8ef0;
    --seg-cache: #ec8b45;
    --seg-dev: #a47fe6;
    --seg-descargas: #e2b64a;
    --seg-libre: #232e48;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0d1321;
  --superficie: #151d30;
  --superficie-2: #1c2640;
  --tinta: #e6ebff;
  --texto: #dde3f0;
  --suave: #a3adc4;
  --tenue: #6f7a94;
  --borde: #27324d;
  --acento: #ec8b45;
  --acento-suave: #3a2616;
  --sobre-acento: #1a0f06;
  --verde: #4cc38a;
  --verde-suave: #14301f;
  --seg-sistema: #5d6883;
  --seg-apps: #6f8ef0;
  --seg-cache: #ec8b45;
  --seg-dev: #a47fe6;
  --seg-descargas: #e2b64a;
  --seg-libre: #232e48;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--t-m)/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); color: var(--tinta); text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-xxl); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
h3 { font-size: var(--t-l); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font: 600 var(--t-xs)/1 var(--f-texto);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave);
}

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

/* ---------- Cabecera ---------- */
.promo {
  display: block; padding: 9px 20px; text-align: center; text-decoration: none;
  background: var(--tinta); color: var(--fondo); font-size: var(--t-s);
}
.promo strong { color: var(--acento-suave); font-weight: 700; }
:root[data-theme="dark"] .promo strong { color: var(--acento); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .promo strong { color: var(--acento); } }

.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 24px; height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta);
  font: 700 1.125rem/1 var(--f-display); letter-spacing: -0.01em; }
.marca img { width: 32px; height: 32px; border-radius: 8px; }
.cabecera nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.cabecera nav a:not(.boton) { color: var(--suave); text-decoration: none; font-size: var(--t-s); }
.cabecera nav a:not(.boton):hover { color: var(--tinta); }
@media (max-width: 720px) { .cabecera nav a:not(.boton) { display: none; } }

.boton {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 20px; border-radius: 8px; border: 1px solid transparent;
  font: 600 var(--t-s)/1.2 var(--f-texto); text-decoration: none; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento);
  transition: transform .15s ease, box-shadow .15s ease;
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--acento); }
.boton.grande { padding: 15px 26px; font-size: var(--t-m); }
.boton.linea { background: transparent; color: var(--tinta); border-color: var(--borde); }
.boton.linea:hover { box-shadow: none; border-color: var(--tinta); }

/* ---------- Portada ---------- */
.portada { padding-block: 72px 56px; display: grid; gap: 48px; }
.portada-texto { display: grid; gap: 22px; max-width: 760px; }
.portada-texto h1 em { font-style: normal; color: var(--acento); }
.portada-texto > p:not(.ficha) { font-size: var(--t-l); color: var(--suave); max-width: 58ch; line-height: 1.5; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ficha { font-size: var(--t-xs); color: var(--tenue); }

/* La barra de almacenamiento: el motivo central del sitio */
.disco {
  margin: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
  padding: 24px; display: grid; gap: 18px;
}
.disco-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.disco-cabecera strong { font: 700 var(--t-l)/1.2 var(--f-display); color: var(--tinta); }
.disco-cabecera span { font-size: var(--t-s); color: var(--suave); }
.barra {
  display: flex; height: 44px; border-radius: 8px; overflow: hidden; gap: 2px;
  background: var(--seg-libre);
}
.seg { height: 100%; flex: 0 0 var(--w); transition: flex-basis 1.1s cubic-bezier(.6,.05,.25,1); }
.seg.sistema { background: var(--seg-sistema); }
.seg.apps { background: var(--seg-apps); }
.seg.cache { background: var(--seg-cache); }
.seg.dev { background: var(--seg-dev); }
.seg.descargas { background: var(--seg-descargas); }
.disco.limpio .seg.cache,
.disco.limpio .seg.dev,
.disco.limpio .seg.descargas { flex-basis: 0.4%; }
@media (prefers-reduced-motion: reduce) { .seg { transition: none; } }

.leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
.leyenda li { display: grid; grid-template-columns: 12px 1fr; gap: 2px 10px; align-items: baseline; }
.leyenda .punto { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.leyenda .nombre { font-size: var(--t-s); color: var(--texto); }
.leyenda .cifra { grid-column: 2; font: 500 var(--t-s)/1.3 var(--f-mono); color: var(--suave); font-variant-numeric: tabular-nums; }
.leyenda .recuperable .cifra { color: var(--acento); }
.disco-pie { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px dashed var(--borde); padding-top: 16px; }
.contador { font: 700 clamp(1.5rem, 4vw, 2rem)/1 var(--f-display); color: var(--verde); letter-spacing: -0.02em; }
.contador small { font: 500 var(--t-s)/1 var(--f-texto); color: var(--suave); letter-spacing: 0; margin-left: 6px; }
.nota-ejemplo { font-size: var(--t-xs); color: var(--tenue); }

/* ---------- Secciones ---------- */
section { padding-block: 72px; }
.seccion-cabecera { display: grid; gap: 12px; max-width: 680px; margin-bottom: 40px; }
.seccion-cabecera p { color: var(--suave); font-size: var(--t-l); line-height: 1.5; }
.alterna { background: var(--superficie); border-block: 1px solid var(--borde); }

/* Regla de la Papelera: proceso real de tres pasos */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--tinta); }
.pasos li::before { content: "Paso " counter(paso); font: 600 var(--t-xs)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.pasos p { color: var(--suave); }
.garantia { margin-top: 36px; display: flex; gap: 14px; align-items: center; padding: 16px 18px;
  background: var(--verde-suave); border-radius: var(--radio); color: var(--texto); font-size: var(--t-s); }
.garantia svg { flex: none; color: var(--verde); }

/* Funciones: grupos por área, no una rejilla de tarjetas iguales */
.areas { display: grid; gap: 56px; }
.area { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 32px; align-items: start; }
.area-titulo { display: grid; gap: 8px; position: sticky; top: 96px; }
.area-titulo p { color: var(--suave); font-size: var(--t-s); }
.lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.lista li { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--borde); }
.lista h3 { font-size: var(--t-m); font-family: var(--f-texto); font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lista p { color: var(--suave); font-size: var(--t-s); }
.pro { font: 700 0.6875rem/1 var(--f-mono); letter-spacing: .06em; padding: 4px 6px; border-radius: 4px;
  background: var(--acento-suave); color: var(--acento); }
@media (max-width: 760px) {
  .area { grid-template-columns: 1fr; gap: 12px; }
  .area-titulo { position: static; }
}

/* Capturas reales */
.capturas { display: grid; gap: 28px; }
.captura { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 28px; align-items: center; }
.captura:nth-child(even) { grid-template-columns: minmax(240px, 340px) 1fr; }
.captura:nth-child(even) figure { order: 2; }
.captura figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde);
  box-shadow: 0 30px 60px -30px rgb(10 20 50 / .35); background: #1e1e20; }
.captura .texto { display: grid; gap: 10px; }
.captura .texto p { color: var(--suave); }
.dato { font: 500 var(--t-s)/1.4 var(--f-mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .captura, .captura:nth-child(even) { grid-template-columns: 1fr; }
  .captura:nth-child(even) figure { order: 0; }
}

/* ---------- Precios ---------- */
.conmutador { display: inline-flex; padding: 4px; gap: 4px; border-radius: 10px; background: var(--superficie-2); margin-bottom: 28px; }
.conmutador button { border: 0; background: transparent; padding: 8px 16px; border-radius: 7px; cursor: pointer;
  font: 600 var(--t-s)/1 var(--f-texto); color: var(--suave); }
.conmutador button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--borde); }
.plan.destacado { border: 2px solid var(--acento); }
.plan-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-cabecera h3 { font-size: var(--t-l); }
.insignia { font: 700 var(--t-xs)/1 var(--f-texto); padding: 5px 9px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); white-space: nowrap; }
.importe { display: grid; gap: 2px; }
.importe .antes { font: 500 var(--t-s)/1.2 var(--f-mono); color: var(--tenue); text-decoration: line-through; }
.importe .ahora { font: 700 2.5rem/1 var(--f-display); color: var(--tinta); letter-spacing: -0.03em; }
.importe .ahora small { font: 500 var(--t-s)/1 var(--f-texto); color: var(--suave); letter-spacing: 0; margin-left: 4px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--t-s); color: var(--suave); }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.plan li::before { content: "✓"; color: var(--verde); font-weight: 700; }
.plan .boton { margin-top: auto; }
.condiciones { margin-top: 20px; font-size: var(--t-xs); color: var(--tenue); max-width: 80ch; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 0; max-width: 820px; }
.preguntas details { border-bottom: 1px solid var(--borde); padding-block: 18px; }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  font: 600 var(--t-m)/1.4 var(--f-texto); color: var(--tinta); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font: 400 1.5rem/1 var(--f-mono); color: var(--suave); transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin-top: 10px; color: var(--suave); max-width: 68ch; }

/* ---------- Descarga ---------- */
.descarga { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  padding: 32px; border-radius: 16px; background: var(--tinta); color: var(--fondo); }
.descarga img { width: 88px; height: 88px; border-radius: 20px; }
.descarga h2 { color: var(--fondo); }
.descarga p { color: color-mix(in srgb, var(--fondo) 72%, var(--tinta)); font-size: var(--t-s); }
.descarga .hash { font: 400 var(--t-xs)/1.5 var(--f-mono); word-break: break-all; color: color-mix(in srgb, var(--fondo) 60%, var(--tinta)); margin-top: 8px; }
@media (max-width: 760px) { .descarga { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie { padding-block: 36px 48px; color: var(--suave); font-size: var(--t-s); }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; }
.pie a { color: var(--suave); }
.copiable { font-family: var(--f-mono); user-select: all; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 760px; padding-block: 56px 88px; display: grid; gap: 14px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); }
.legal h2 { font-size: var(--t-l); margin-top: 22px; }
.legal p, .legal li { color: var(--texto); max-width: 68ch; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.legal .fecha { color: var(--suave); font-size: var(--t-s); }
.borrador { background: var(--acento-suave); color: var(--texto); padding: 12px 16px; border-radius: var(--radio); font-size: var(--t-s); }