/* creatyk.com · /seguridad and /en/security. Uses the tokens and components of base.css (DESIGN.md has the rules);
   only this area's own rules live here. Owner: the novedades/seguridad agent.
   Landing-page-design pass: spacing (--spacing-*), backgrounds (--bg-*), radii (--radius-*) and motion
   (--ease, --dur-*) come from base.css, with fallbacks until it lands; type comes from the text-style
   classes in the markup (.heading-*, .title-*, .body-*, .caption-*, .button-*), so no sizes here.
   No glows, no gradients: violet is the accent only. Motion moves with transform and opacity only;
   with reduced motion everything is in its finished place (base.css). */

/* ── head: what's on this page ────────────────────────────────────────────────────────────── */
.sec-toc ul { margin: var(--spacing-400, 32px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-75, 8px); }
.sec-toc a {
  display: inline-grid; place-items: center; height: 40px; padding: 0 var(--spacing-200, 16px); border-radius: var(--radius-full, 999px);
  background: var(--bg-1, #181818); color: var(--ink-2); text-decoration: none;
  transition: background-color var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), color var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.sec-toc a:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .sec-toc a:hover { background: var(--bg-2, #1f1f1f); color: var(--ink); } }
@media (pointer: coarse) { .sec-toc a { height: 44px; } }

/* ── shared layout ────────────────────────────────────────────────────────────────────────── */
.sec-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-700, 64px); align-items: center; }
.sec-split--top { align-items: start; }
.sec-split--top .section-head { margin-bottom: 0; }
.sec-note { margin-top: var(--spacing-400, 32px); display: flex; gap: var(--spacing-100, 12px); align-items: flex-start; max-width: 48ch; color: var(--ink-2); }
.sec-note .icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-text); }

/* ── 1. what stays on your PC: a ledger ───────────────────────────────────────────────────── */
.sec-ledger { padding: var(--spacing-500, 40px); border-radius: var(--radius-24, 24px); background: var(--bg-1, #181818); }
.sec-ledger__title { display: flex; gap: var(--spacing-100, 12px); align-items: center; }
.sec-ledger__title .icon { width: 22px; height: 22px; color: var(--accent-text); }
.sec-ledger__list { margin-top: var(--spacing-300, 24px); display: grid; gap: var(--spacing-100, 12px); }
.sec-ledger__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--spacing-200, 16px); align-items: center; padding: var(--spacing-200, 16px); border-radius: var(--radius-12, 12px); background: var(--bg-2, #1f1f1f); }
.sec-ledger__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-8, 8px); background: var(--bg-3, #272727); color: var(--accent-text); }
.sec-ledger__body { display: grid; gap: var(--spacing-25, 2px); }
.sec-ledger__text { color: var(--ink-2); text-wrap: pretty; }

/* ── 2. what leaves your PC: the story ────────────────────────────────────────────────────── */
.flow__grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: var(--spacing-700, 64px); align-items: stretch; }
.flow__col { padding-bottom: 14svh; }
.flow .section-head { margin-bottom: 0; }
.flow__steps { margin: 0; padding: 0; list-style: none; }
.flow__step { scroll-margin-top: 30svh; }
.flow__step:first-child { margin-top: var(--spacing-900, 96px); }
.flow__step + .flow__step { margin-top: 42svh; }
.flow__text { max-width: 470px; transition: opacity var(--dur-move, 500ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.js .flow__step:not(.is-active) .flow__text { opacity: 0.5; }
.flow__title { text-wrap: balance; }
.flow__p { margin-top: var(--spacing-100, 12px); color: var(--ink-2); text-wrap: pretty; }
.flow__inline { display: none; }
.flow__media { position: relative; }
.flow__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
.flow__frame { display: grid; gap: var(--spacing-200, 16px); }
.flow__count { margin-top: var(--spacing-300, 24px); text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.js .flow__frame { gap: 0; }
.js .flow__frame > .route { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity var(--dur-move, 500ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--dur-reveal, 700ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s linear var(--dur-move, 500ms); }
.js .flow__frame > .route.is-past { transform: translateY(-24px); }
.js .flow__frame > .route.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-move, 500ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--dur-reveal, 700ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s; }

/* the route drawing: from → the comet on its arc → to, then what travels */
.route { margin: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--spacing-500, 40px); border-radius: var(--radius-24, 24px); background: var(--bg-1, #181818); }
.route__map { position: relative; margin: 0 var(--spacing-400, 32px) var(--spacing-900, 96px); aspect-ratio: 320 / 100; }
.route__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__track { fill: none; stroke: var(--bg-4, #313131); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route__comet { fill: var(--accent-text); }
.route__end { position: absolute; top: 92%; display: grid; gap: var(--spacing-50, 4px); max-width: 48%; }
.route__end:not(.route__end--to) { left: 5.625%; translate: -28px -28px; justify-items: start; text-align: left; }
.route__end--to { right: 5.625%; translate: 28px -28px; justify-items: end; text-align: right; }
.route__badge { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-16, 16px); background: var(--bg-3, #272727); color: var(--ink); }
.route__badge .icon { width: 24px; height: 24px; }
.route__badge--to { background: var(--bg-4, #313131); color: var(--accent-text); }
.route__name { margin-top: var(--spacing-50, 4px); overflow-wrap: anywhere; }
.route__kind { color: var(--ink-3); }
.route__cargo { padding: var(--spacing-300, 24px); border-radius: var(--radius-12, 12px); background: var(--bg-2, #1f1f1f); }
.route__label { color: var(--ink); }
.route__label--no { margin-top: var(--spacing-200, 16px); color: var(--ink-2); }
.route__chips { margin: var(--spacing-75, 8px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-75, 8px); }
.route__chips li { display: inline-flex; align-items: center; gap: var(--spacing-75, 8px); min-height: 32px; padding: var(--spacing-50, 4px) var(--spacing-100, 12px); border-radius: var(--radius-full, 999px); background: var(--bg-3, #272727); color: var(--accent-text); }
.route__chips .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.route__chips--no li { color: var(--ink-2); }

/* ── 3. everything can be undone ──────────────────────────────────────────────────────────── */
.sec-undo__list { gap: var(--spacing-200, 16px); }
.sec-undo__list li { color: var(--ink); text-wrap: pretty; }
.sec-shots { margin-top: var(--spacing-700, 64px); display: grid; gap: var(--spacing-100, 12px); }
.sec-proof { margin-top: var(--spacing-600, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-300, 24px); align-items: start; }
.sec-proof__item .shot { width: fit-content; max-width: 100%; }
.sec-proof__item .shot img { width: auto; max-width: 100%; }
.sec-proof__caption { margin-top: var(--spacing-100, 12px); display: flex; gap: var(--spacing-75, 8px); align-items: flex-start; max-width: 48ch; color: var(--ink-2); }
.sec-proof__caption .icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-text); }
.sec-not { margin-top: var(--spacing-600, 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-300, 24px) var(--spacing-700, 64px); padding: var(--spacing-500, 40px); border-radius: var(--radius-24, 24px); background: var(--bg-1, #181818); }
.sec-not__title { display: flex; gap: var(--spacing-100, 12px); align-items: center; }
.sec-not__title .icon { width: 22px; height: 22px; color: var(--warn); }
.sec-not__text { margin-top: var(--spacing-75, 8px); color: var(--ink-2); }
.sec-not__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-100, 12px); }
.sec-not__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--spacing-100, 12px); color: var(--ink); text-wrap: pretty; }
.sec-not__list .icon { width: 18px; height: 24px; color: var(--ink-3); }
.sec-not__note { grid-column: 2; color: var(--ink-2); }

/* ── 4. administrator rights ──────────────────────────────────────────────────────────────── */
.sec-admin__panel { display: grid; gap: var(--spacing-500, 40px); padding: var(--spacing-600, 48px); border-radius: var(--radius-24, 24px); background: var(--bg-1, #181818); }
.sec-admin__head { max-width: 860px; }
.sec-admin__head .section-lead { max-width: 62ch; }
.sec-admin__list-title { display: flex; gap: var(--spacing-100, 12px); align-items: center; }
.sec-admin__list-title .icon { width: 18px; height: 18px; color: var(--accent-text); }
.sec-admin__list { margin: var(--spacing-300, 24px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-200, 16px) var(--spacing-400, 32px); }
.sec-admin__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--spacing-100, 12px); align-items: center; color: var(--ink); text-wrap: pretty; }
.sec-admin__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-500); }
.sec-risk { margin-top: var(--spacing-600, 48px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-600, 48px); align-items: center; }
.sec-risk__text p { margin-top: var(--spacing-100, 12px); max-width: 44ch; color: var(--ink-2); }

/* ── 5. SmartScreen: the page's one centred moment ────────────────────────────────────────── */
.sec-ss__inner { display: grid; justify-items: center; text-align: center; }
.sec-ss__text { margin-top: var(--spacing-300, 24px); max-width: 54ch; color: var(--ink-2); text-wrap: pretty; }
.sec-ss__sentence { margin-top: var(--spacing-500, 40px); max-width: 32ch; padding: var(--spacing-400, 32px) var(--spacing-500, 40px); border-radius: var(--radius-24, 24px); background: var(--bg-1, #181818); text-wrap: balance; }
.sec-ss__facts { margin-top: var(--spacing-500, 40px); max-width: 560px; text-align: left; }
.sec-ss__facts li { color: var(--ink); text-wrap: pretty; }
.sec-ss__link { margin-top: var(--spacing-500, 40px); }

/* ── 6. updates and the license ───────────────────────────────────────────────────────────── */
.sec-blocks { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-200, 16px); }
.sec-block { padding: var(--spacing-500, 40px); border-radius: var(--radius-24, 24px); background: var(--bg-1, #181818); scroll-margin-top: calc(var(--header-h) + var(--spacing-400, 32px)); }
.sec-block--verificadas { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: var(--bg-2, #1f1f1f); }
.sec-block__title { display: flex; gap: var(--spacing-100, 12px); align-items: center; }
.sec-block__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-12, 12px); background: var(--bg-3, #272727); color: var(--accent-text); }
.sec-block__text { margin-top: var(--spacing-200, 16px); color: var(--ink-2); text-wrap: pretty; }
.sec-block--verificadas .sec-block__text { color: var(--ink); }

/* ── 7. your data, your rights ────────────────────────────────────────────────────────────── */
.sec-rights .sec-split { align-items: start; }
.sec-rights__lead a { color: var(--accent-text); }
.sec-rights__list { margin-top: var(--spacing-300, 24px); }
.sec-rights__terms { margin-top: var(--spacing-300, 24px); color: var(--ink-3); }
.sec-rights__actions { margin-top: var(--spacing-300, 24px); }

/* ── tablet and phone ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .flow__grid { display: block; }
  .flow__col { padding: 0; }
  .flow__media { display: none; }
  .flow__step:first-child { margin-top: var(--spacing-600, 48px); }
  .flow__step + .flow__step { margin-top: var(--spacing-800, 80px); }
  .js .flow__step:not(.is-active) .flow__text { opacity: 1; }
  .flow__inline { display: block; margin-top: var(--spacing-300, 24px); max-width: 620px; }
}
@media (max-width: 899px) {
  .sec-split, .sec-not, .sec-risk, .sec-blocks, .sec-proof { grid-template-columns: minmax(0, 1fr); }
  .sec-split { gap: var(--spacing-500, 40px); }
  .sec-admin__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-not__note { grid-column: auto; }
  .sec-block--verificadas { grid-row: auto; }
}
@media (max-width: 560px) {
  .sec-ledger, .sec-not, .sec-admin__panel, .sec-block { padding: var(--spacing-300, 24px); }
  .route { padding: var(--spacing-200, 16px); }
  .route__cargo { border-radius: var(--radius-8, 8px); }
  .sec-admin__list { grid-template-columns: minmax(0, 1fr); }
  .route__map { margin: 0 var(--spacing-300, 24px) var(--spacing-900, 96px); }
  .route__badge { width: 48px; height: 48px; border-radius: var(--radius-12, 12px); }
  .route__end:not(.route__end--to) { translate: -24px -24px; }
  .route__end--to { translate: 24px -24px; }
  .sec-ss__sentence { padding: var(--spacing-300, 24px); }
}