/* ============================================================
   PRISMA · compressor.css · la página de Prisma Compressor (2026-10-14)
   Viene de la landing del programa (lightcut-web), pasada a la línea del
   sitio: Manrope en todo (cifras con tabular-nums), tinta, naranja y los
   tokens de main.css. Todo con prefijo pc- para no chocar con nada.
   ============================================================ */
.pc { --pc-2: #111112; --pc-3: #1B1B1E; --pc-4: #26262A; --pc-line: rgb(var(--fg-rgb) / .09); --pc-line-2: rgb(var(--fg-rgb) / .18); --pc-ok: #6BCB77; }
.pc .num, .pc b, .pc output { font-variant-numeric: tabular-nums; }

/* ---------- Portada ---------- */
.pc-hero { position: relative; padding: calc(84px + 6vh) 0 clamp(56px, 9vh, 110px); overflow: hidden; }
.pc-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 999.98px) { .pc-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .pc-hero { padding-top: calc(72px + 5vh); } }
.pc-crumbs { margin-bottom: 22px; }
.pc-hero__id { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pc-hero__id img { width: 56px; height: 56px; border-radius: 22%; }
.pc-hero__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; text-wrap: balance; }
.pc-hero__title em { font-style: normal; color: var(--orange); }
.pc-hero__lead { margin-top: 22px; max-width: 34em; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.55; color: var(--text-on-ink-2); }
.pc-dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pc-note { margin-top: 14px; font-size: .9rem; color: rgb(var(--fg-rgb) / .5); }
.pc-note strong { color: var(--text-on-ink); font-weight: 500; }

/* la app, dibujada (como en la landing del programa) */
.pc-app { min-width: 0; border-radius: 16px; overflow: hidden; background: var(--pc-2); border: 1px solid var(--pc-line-2); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8); font-size: 13px; }
.pc-app__bar { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--pc-line); }
.pc-app__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--pc-4); }
.pc-app__bar span { margin-left: 12px; font-weight: 500; }
.pc-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--pc-line); }
.pc-row__fill { position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--orange-rgb) / .04), rgb(var(--orange-rgb) / .16)); border-right: 1px solid rgb(var(--orange-rgb) / .55); }
.pc-mini { position: relative; width: 84px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; }
.pc-mini span { position: absolute; right: 4px; bottom: 4px; padding: 3px 4px; border-radius: 3px; background: rgb(10 10 10 / .75); font-size: 10px; font-weight: 500; line-height: 1; }
.pc-m1 { background: radial-gradient(circle at 70% 30%, #FFB25C 0 12%, transparent 13%), linear-gradient(180deg, #F08A4B 0%, #B3475B 45%, #2E2A4F 46%, #1D2340 100%); }
.pc-m2 { background: linear-gradient(160deg, #0E3B4A 0%, #1A6C7A 40%, #CDE7E2 41%, #6FA9A6 60%, #0F2F3A 100%); }
.pc-m3 { background: radial-gradient(circle at 30% 70%, #F7D774 0 5%, transparent 6%), radial-gradient(circle at 62% 40%, #FF7A59 0 4%, transparent 5%), linear-gradient(180deg, #11131C 0%, #232A45 70%, #3A2F3F 100%); }
.pc-m4 { background: linear-gradient(200deg, #9CB27A 0%, #5E7B4A 35%, #2E3D2A 70%, #1B231A 100%); }
.pc-row h4 { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.pc-row p { font-size: 12px; color: var(--text-on-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-w { text-align: right; font-size: 12.5px; line-height: 1.35; white-space: nowrap; }
.pc-w s { color: rgb(var(--fg-rgb) / .42); }
.pc-w b { display: block; font-weight: 500; }
.pc-w .ok { color: var(--pc-ok); }
.pc-w .live { color: #FF6A33; }
.pc-app__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 16px 18px; background: var(--ink); }
.pc-app__pct { min-width: 2.6em; font-size: 44px; font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.pc-app__pct small { margin-left: 2px; font-size: 18px; font-weight: 400; color: var(--text-on-ink-2); }
.pc-bar { height: 6px; border-radius: 3px; background: var(--pc-4); overflow: hidden; }
.pc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--orange); }
.pc-app__line { margin-top: 8px; font-size: 12.5px; font-weight: 500; }
.pc-app__line span { color: var(--text-on-ink-2); font-weight: 400; }
@media (max-width: 519.98px) { .pc-row { grid-template-columns: 64px minmax(0, 1fr); } .pc-mini { width: 64px; } .pc-w { grid-column: 2; text-align: left; } }

/* ---------- Secciones ---------- */
.pc-sec { border-top: 1px solid var(--pc-line); }
.pc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.pc-head .kicker { grid-column: 1 / -1; }
.pc-head__title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.pc-head__lead { max-width: 32em; color: var(--text-on-ink-2); }
@media (max-width: 819.98px) { .pc-head { grid-template-columns: minmax(0, 1fr); } }

/* calculadora de espacio */
.pc-calc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 859.98px) { .pc-calc { grid-template-columns: minmax(0, 1fr); } }
.pc-ctl { display: grid; gap: 22px; align-content: start; }
.pc-field label, .pc-field__t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: .9rem; font-weight: 500; }
.pc-field output { font-size: .95rem; font-weight: 500; }
.pc select { width: 100%; height: 46px; padding: 0 12px; border-radius: 10px; background: var(--pc-3); color: var(--text-on-ink); border: 1px solid rgb(var(--fg-rgb) / .36); font: 500 .9rem var(--f-text); }
.pc-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--pc-2); border: 1px solid var(--pc-line-2); }
.pc-seg button { flex: 1; height: 38px; border-radius: 7px; color: var(--text-on-ink-2); font-weight: 500; font-size: .9rem; }
.pc-seg button[aria-pressed="true"] { background: var(--pc-4); color: var(--text-on-ink); box-shadow: inset 0 0 0 1px var(--pc-line-2); }
.pc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: none; }
.pc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--fill, 50%), var(--pc-4) var(--fill, 50%)); }
.pc input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--fill, 50%), var(--pc-4) var(--fill, 50%)); }
.pc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #F4F4F6; box-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.pc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #F4F4F6; }
.pc-res { display: grid; gap: 22px; align-content: start; }
.pc-big { display: grid; gap: 8px; }
.pc-big__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pc-big__h span { font-size: .9rem; color: var(--text-on-ink-2); }
.pc-big__h b { font-size: 1.15rem; font-weight: 500; }
.pc-track { height: 44px; border-radius: 10px; background: var(--pc-2); border: 1px solid var(--pc-line); overflow: hidden; }
.pc-track i { display: block; height: 100%; transition: width .45s var(--ease-enter); }
.pc-track__before { width: 100%; background: repeating-linear-gradient(135deg, var(--pc-4) 0 8px, #2D2D32 8px 16px); }
.pc-track__after { background: var(--orange); }
.pc-track__free { background: var(--pc-ok); }
.pc-free { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 18px; border-top: 1px solid var(--pc-line); }
.pc-free__n { font-size: clamp(3rem, 2rem + 4vw, 5.25rem); font-weight: 200; line-height: 1; letter-spacing: -.045em; }
.pc-free__n small { margin-left: 6px; font-size: .38em; font-weight: 400; letter-spacing: 0; color: var(--text-on-ink-2); }
.pc-free p { color: var(--text-on-ink-2); }
.pc-fine { font-size: .82rem; color: rgb(var(--fg-rgb) / .5); }
.pc-fine--plans { margin-top: 18px; max-width: 920px; }

/* potencia */
.pc-power { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 859.98px) { .pc-power { grid-template-columns: minmax(0, 1fr); } }
.pc-board { display: grid; gap: 22px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r); background: var(--pc-2); border: 1px solid var(--pc-line); }
.pc-board__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pc-board__n { font-size: 64px; font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.pc-board__n small { margin-left: 2px; font-size: 26px; font-weight: 400; color: var(--text-on-ink-2); }
.pc-mode { font-weight: 500; text-align: right; }
.pc-mode span { display: block; margin-top: 2px; font-weight: 400; font-size: .88rem; color: var(--text-on-ink-2); }
.pc-marks { display: flex; justify-content: space-between; margin-top: 6px; }
.pc-marks button { padding: 4px 0; font-size: .82rem; font-weight: 500; color: rgb(var(--fg-rgb) / .45); }
.pc-marks button.is-on, .pc-marks button:hover { color: var(--text-on-ink); }
.pc-share { display: grid; gap: 10px; }
.pc-share__r { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.4em; gap: 12px; align-items: center; font-size: .88rem; color: var(--text-on-ink-2); }
.pc-share__r b { text-align: right; font-weight: 500; color: var(--text-on-ink); }
.pc-track--thin { height: 10px; border-radius: 5px; }
.pc-time { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--pc-line); font-size: .88rem; color: var(--text-on-ink-2); }
.pc-time b { display: block; margin-top: 4px; font-size: 1.35rem; font-weight: 500; color: var(--text-on-ink); }
.pc-time__r { text-align: right; } .pc-time__r b { font-size: 1rem; }
.pc-why { display: grid; gap: 22px; }
.pc-why li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--pc-line-2); }
.pc-why strong { font-weight: 500; }
.pc-why span { color: var(--text-on-ink-2); font-size: .95rem; }

/* pasos y garantías */
.pc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: paso; }
@media (max-width: 859.98px) { .pc-steps { grid-template-columns: minmax(0, 1fr); } }
.pc-steps li { display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; border-radius: var(--r); background: var(--pc-2); border: 1px solid var(--pc-line); counter-increment: paso; }
.pc-steps li::before { content: counter(paso, decimal-leading-zero); font-size: .78rem; font-weight: 500; letter-spacing: .14em; color: var(--orange); }
.pc-steps h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.pc-steps p { color: var(--text-on-ink-2); font-size: .95rem; }
.pc-steps code { padding: 2px 6px; border-radius: 4px; background: var(--pc-3); font-size: .82rem; color: var(--text-on-ink); }
.pc-safe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--pc-line); }
@media (max-width: 759.98px) { .pc-safe { grid-template-columns: minmax(0, 1fr); } }
.pc-safe > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--pc-line); }
.pc-safe svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-safe strong { display: block; margin-bottom: 4px; font-weight: 500; }
.pc-safe span { color: var(--text-on-ink-2); font-size: .95rem; }

/* gratis o pro */
.pc-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; }
@media (max-width: 759.98px) { .pc-plans { grid-template-columns: minmax(0, 1fr); } }
.pc-plan { display: grid; gap: 22px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r); border: 1px solid var(--pc-line-2); background: var(--pc-2); }
.pc-plan--pro { border-color: rgb(var(--orange-rgb) / .55); background: linear-gradient(180deg, rgb(var(--orange-rgb) / .08), rgb(var(--orange-rgb) / 0) 42%), var(--pc-2); }
.pc-plan header { display: grid; gap: 6px; }
.pc-plan h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 500; }
.pc-plan__tag { padding: 5px 8px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pc-plan header p { color: var(--text-on-ink-2); font-size: .95rem; }
.pc-plan__n { display: flex; align-items: baseline; gap: 10px; }
.pc-plan__n b { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.pc-plan--pro .pc-plan__n b { color: var(--orange); }
.pc-plan__n span { font-size: .88rem; color: var(--text-on-ink-2); }
.pc-plan ul { display: grid; gap: 11px; }
.pc-plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: .95rem; }
.pc-plan li svg { width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--text-on-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-plan--pro li svg { stroke: var(--orange); }
.pc-plan li.no { color: rgb(var(--fg-rgb) / .45); }

/* preguntas */
.pc-faq { max-width: 860px; border-top: 1px solid var(--pc-line); }
.pc-faq details { border-bottom: 1px solid var(--pc-line); }
.pc-faq summary { position: relative; padding: 22px 40px 22px 0; list-style: none; cursor: pointer; font-size: 1.1rem; font-weight: 500; }
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--text-on-ink-2); border-bottom: 1.5px solid var(--text-on-ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease-ui); }
.pc-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.pc-faq summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
.pc-faq details p { max-width: 44em; padding: 0 0 24px; color: var(--text-on-ink-2); }

/* cierre */
.pc-end__title { max-width: 14em; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.pc-back { display: inline-flex; gap: 8px; margin-top: clamp(40px, 7vh, 72px); min-height: 44px; align-items: center; color: var(--text-on-ink-2); font-weight: 500; }
.pc-back:hover { color: var(--text-on-ink); }

@media (prefers-reduced-motion: reduce) { .pc-track i { transition: none; } }