/* ID Protekt — id.ism.ec.
   One stylesheet, no build step, no external requests (system font stacks only).

   ## The palette is the app icon's, verbatim

   `ID.Protekt/Configuration/Icon/MakeAppIcon.swift` and
   `ID.Protekt/Configuration/Illustrations/MakeIllustrations.swift` name six colours between
   them, and this file re-declares exactly those. Nothing here is picked by eye: a page that
   invents its own blue would sit under a home-screen icon that does not match it.

     card   #F6F3EA   the document
     ink    #0C0D12   what the redactor burns in
     kept   #2EC7B0   the one field this recipient may see  ← the accent, and the whole product
     indigo #283676   hardware, and the icon's ground
     deep   #11183E   the far stop of the icon's radial gradient
     amber  #E89E2C   the chip's contacts

   ## Two teals, on purpose

   `#2EC7B0` against white is about 1.9:1 — fine for a 3 px rule or a filled disc, illegible as
   body text. So the brand teal stays a *graphic* colour and text-weight uses `--accent-text`,
   which is the same hue pushed to contrast. Anything readable takes `--accent-text`; anything
   drawn takes `--kept`.

   ## The page ground is never the card colour

   The eight illustrations are transparent PNGs whose subject is a pale card. That is what lets
   one asset serve light and dark mode — and it also means a page painted `#F6F3EA` would make
   every card in every drawing vanish. Light mode is white and cool grey; dark mode is the
   icon's own indigo. */

:root {
  --card:        #f6f3ea;
  --ink:         #0c0d12;
  --kept:        #2ec7b0;
  --indigo:      #283676;
  --deep:        #11183e;
  --amber:       #e89e2c;

  --bg:          #ffffff;
  --bg-soft:     #f4f6fa;
  --surface:     #ffffff;
  --text:        #0c0d12;
  --text-soft:   #4c5468;
  --text-faint:  #767e93;
  --line:        #e2e6ef;
  --accent-text: #0d7d6e;

  --btn-bg:      var(--indigo);
  --btn-fg:      #ffffff;

  --shadow:      0 1px 2px rgba(12, 13, 18, .04), 0 8px 24px -12px rgba(12, 13, 18, .18);
  --shadow-lift: 0 2px 4px rgba(12, 13, 18, .05), 0 18px 40px -18px rgba(12, 13, 18, .26);

  --radius:      18px;
  --radius-sm:   12px;
  --maxw:        1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0a1030;
    --bg-soft:     #0f1740;
    --surface:     #141d4b;
    --text:        #eef1f8;
    --text-soft:   #aeb7d2;
    --text-faint:  #8189a8;
    --line:        #26305e;
    --accent-text: #5fe3cc;

    --btn-bg:      var(--card);
    --btn-fg:      var(--deep);

    --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 46px -20px rgba(0, 0, 0, .7);
  }
}

/* Anything sitting on the indigo hero ground. Scoped as a variable override rather than as a
   second set of rules, so a component drops into the hero without knowing it is there. */
.on-deep {
  --surface:     rgba(255, 255, 255, .07);
  --text:        #f4f6fd;
  --text-soft:   #b9c2e2;
  --text-faint:  #8e99c2;
  --line:        rgba(255, 255, 255, .16);
  --accent-text: #6fe6d0;
  --btn-bg:      var(--card);
  --btn-fg:      var(--deep);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 .55em; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

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

/* ── header ───────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 18px 24px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.wordmark:hover { text-decoration: none; }
.wordmark-thin { font-weight: 400; color: var(--text-soft); }
/* The mark is the app icon, inline: a light card with one field left readable. */
.mark { width: 30px; height: 30px; flex: none; border-radius: 8px; display: block; }

.site-header nav { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.site-header nav a { color: var(--text-soft); }
.site-header nav a:hover { color: var(--text); text-decoration: none; }
.site-header nav .lang {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 13px;
}

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(120% 100% at 50% 12%, var(--indigo) 0%, var(--deep) 78%);
  color: #f4f6fd;
  padding: 0 24px 0;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 48px;
  align-items: center;
  padding-block: 56px 0;
}
.hero-copy { padding-bottom: 64px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 4px;
  border-radius: 2px;
  background: var(--kept);
}
.hero h1 {
  /* Capped at 3.1rem, not 3.7: the headline is two written lines with a `<br>` between them,
     and at 3.7rem the longer of the two overflows the copy column and wraps into a third,
     leaving "eres." alone on a line. `balance` is the belt to that braces. */
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: .4em;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-soft);
  max-width: 34rem;
}
.lede-strong { color: #ffffff; font-weight: 600; }
.fineprint { color: var(--text-faint); font-size: 14.5px; margin: 18px 0 0; max-width: 32rem; }

/* ── store buttons ────────────────────────────────────────── */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 18px;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  min-width: 196px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.store-btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* No href = not in the store yet: the button stays, but it must not look clickable. */
.store-btn:not([href]) { cursor: default; opacity: .82; }
.store-btn:not([href]):hover { transform: none; box-shadow: none; }
.store-btn svg { width: 24px; height: 24px; flex: none; }
.store-btn span {
  display: flex; flex-direction: column;
  line-height: 1.15; font-size: 17px; font-weight: 650; text-align: left;
}
.store-btn small { font-size: 11px; font-weight: 400; opacity: .78; }

/* ── the phone ────────────────────────────────────────────── */
/* A rendition of the app's home screen, not a screenshot: the three mode cards, the same
   illustrations the app ships, the same sentences from `Shared/Shell/Strings.swift`. The
   screen stays light in both appearances — a phone in a photograph does not invert. */
.phone-stage { align-self: end; display: flex; justify-content: center; }
.phone {
  width: min(310px, 100%);
  background: var(--indigo);
  border-radius: 44px;
  padding: 11px 11px 0;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .1);
  margin-bottom: -14px;
}
.phone-screen {
  /* Left-aligned explicitly: the hero centres its text below 900 px, and a mode card whose
     paragraph is centred stops looking like the app's list and starts looking like a poster. */
  text-align: left;
  background: #ffffff;
  color: var(--ink);
  border-radius: 34px 34px 0 0;
  padding: 14px 14px 0;
  overflow: hidden;
}
.app-bar {
  text-align: center;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececf1;
  color: var(--ink);
}
.app-tagline {
  font-size: 10.5px;
  line-height: 1.42;
  color: #6b7080;
  text-align: center;
  margin: 12px 4px 12px;
}
.app-card {
  background: #f1f1f4;
  border-radius: 14px;
  padding: 11px 12px;
  margin-bottom: 9px;
}
.app-card img { display: block; width: 74%; margin: 0 auto 6px; }
/* A <p>, not a heading: the mock repeats the #app section's headings, so it stays out of the
   outline. Two classes deep so `.app-card p` below cannot restyle it. */
.app-card .app-card-title {
  font-size: 11.5px;
  line-height: 1.12;
  font-weight: 650;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.app-card .app-card-title::after { content: "›"; color: #b4b7c2; font-weight: 700; }
.app-card p { font-size: 9.8px; line-height: 1.4; color: #5c6171; margin: 4px 0 0; }

/* ── stats ────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: var(--maxw);
  margin: -1px auto 0;
  padding: 0 24px;
}
.stats > div {
  padding: 34px 20px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.stats > div + div { border-left: 1px solid var(--line); }
.stats strong {
  display: block;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
}
.stats span { display: block; color: var(--text-soft); font-size: 14.5px; margin-top: 4px; }

/* ── sections ─────────────────────────────────────────────── */
.band { padding-block: 76px; }
.band-alt { background: var(--bg-soft); }
.band-deep {
  background: radial-gradient(110% 130% at 50% 0%, var(--indigo) 0%, var(--deep) 80%);
  color: #f4f6fd;
}
.section-head { max-width: 46rem; margin: 0 auto 46px; text-align: center; }
.section-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section-head p { color: var(--text-soft); font-size: 1.08rem; margin: 0; }

/* ── mode cards (the app's three doors) ───────────────────── */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.mode {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mode:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.mode img { display: block; width: 78%; margin: 4px auto 16px; }
.mode h3 { font-size: 1.12rem; margin-bottom: .35em; }
.mode p { color: var(--text-soft); font-size: 15.5px; margin: 0; }
.mode .tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ── steps ────────────────────────────────────────────────── */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.steps li { text-align: center; }
.steps figure { margin: 0 0 18px; }

/* An illustration plate, and it stays light in every theme.
   `il-tap` draws the phone in `indigo` — the same colour as the band it sits on here — so on a
   tinted ground the hardware vanishes and the card appears to float. The app renders these over
   a white system background and that is the ground they were drawn against, so the plate
   reproduces it rather than tinting to match the section. */
.plate {
  background: #fbfbfd;
  border: 1px solid rgba(12, 13, 18, .09);
  border-radius: var(--radius);
  padding: 14px 10px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}
.steps img { display: block; width: 88%; margin-inline: auto; }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--kept);
  color: var(--deep);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 12px;
}
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--text-soft); font-size: 15.5px; margin: 0; }

/* ── alternating showcase rows ────────────────────────────── */
.showcase { display: grid; gap: 64px; }
.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.showcase-row:nth-child(even) .showcase-art { order: -1; }
.showcase-art {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
}
.showcase-art img { display: block; width: 100%; }
.showcase h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.showcase p { color: var(--text-soft); margin: 0; }
.showcase .kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 12px;
}

/* ── benefit cards ────────────────────────────────────────── */
.cards {
  display: grid;
  /* 420px floor → 2×2 on desktop, so four cards never leave an orphan on its own row. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px;
}
.cards article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--surface);
}
.cards h3 { font-size: 1.05rem; }
.cards p { color: var(--text-soft); font-size: 15.5px; margin: 0; }
/* The icon's one idea, reused as furniture: a short bar in `kept` over each card. */
.cards article::before {
  content: "";
  display: block;
  width: 28px; height: 4px;
  border-radius: 2px;
  background: var(--kept);
  margin-bottom: 16px;
}

/* ── contact ──────────────────────────────────────────────── */
.contact { text-align: center; }
.mail-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  background: var(--kept);
  color: var(--deep);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mail-btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ── closing ──────────────────────────────────────────────── */
.closing { text-align: center; padding-block: 84px; }
.closing h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.closing .cta-row { justify-content: center; }
.closing p { color: var(--text-soft); max-width: 34rem; margin-inline: auto; }

/* ── footer ───────────────────────────────────────────────── */
footer {
  padding: 34px 24px 52px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
footer p { margin: 0 0 6px; }
footer a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }

/* ── /go ──────────────────────────────────────────────────── */
/* The fallback page is one column and no product pitch: whoever reached it is mid-task. */
.handoff { max-width: 48rem; margin-inline: auto; padding-block: 56px 76px; text-align: center; }
.handoff h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; }
.handoff .lede { margin-inline: auto; }
.handoff .cta-row { justify-content: center; }
.handoff-art { width: min(400px, 86%); margin: 10px auto 32px; }
.handoff-art img { display: block; width: 100%; }
.handoff .fineprint { margin-inline: auto; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; padding-block: 40px 0; text-align: center; }
  .hero-copy { padding-bottom: 8px; }
  .eyebrow, .lede, .fineprint { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .showcase-row { grid-template-columns: 1fr; gap: 26px; }
  .showcase-row:nth-child(even) .showcase-art { order: 0; }
  .stats > div + div { border-left: none; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .site-header { flex-direction: column; gap: 12px; padding-bottom: 14px; }
  .site-header nav { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  .band { padding-block: 56px; }
  .store-btn { flex: 1 1 100%; justify-content: center; }
  .stats { grid-template-columns: 1fr; }
  .stats > div { padding: 24px 16px; }
}

/* ── /privacidad ──────────────────────────────────────────────────────────────
   Una sola columna de lectura. Hereda tipografía y color del resto del sitio. */
.legal{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
.legal .back{margin:0 0 1.75rem;font-size:.95rem}
.legal h1{margin:0 0 .5rem}
.legal .lede{color:var(--muted,#5b6472);margin:0 0 2.25rem}
.legal h2{margin:2.25rem 0 .6rem}
.legal h3{margin:1.6rem 0 .4rem;font-size:1.02rem}
.legal p,.legal li{line-height:1.65}
.legal ul{padding-left:1.15rem}
.legal li{margin:.35rem 0}