/* hecho.fyi. Type led brand: big type, one colour per app, Spanish punctuation as graphics. */
:root {
  --paper: #ffffff;
  --tiza: #f2f2ef;
  --ink: #141414;
  --gris: #6e6e6e;
  --linea: #e3e3de;
  --azul: #2f4bff;      /* charla */
  --amarillo: #ffd60a;  /* traduce */
  --rojo: #ff4b2b;      /* verbos */
  --ok: #1f8a4c;
  --bad: #c4270f;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 4.5vw, 64px);
  --section: clamp(64px, 8vw, 112px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* App colours. Each page or band sets --app and --on-app. */
.charla { --app: var(--azul); --on-app: #ffffff; }
.traduce { --app: var(--amarillo); --on-app: var(--ink); }
.verbos { --app: var(--rojo); --on-app: var(--ink); }

/* Type */
.label { font: 400 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.headline { font-size: clamp(48px, 6.2vw, 88px); line-height: 0.95; letter-spacing: -0.035em; }
.line, .headline { font-family: var(--display); font-weight: 800; }
.line { font-size: clamp(36px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -0.025em; }
.body { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 34em; }
.small { font-size: 15px; color: var(--gris); }
.huge {
  font-family: var(--display); font-weight: 800; white-space: nowrap;
  font-size: clamp(150px, 30.5vw, 440px); line-height: 0.8; letter-spacing: -0.045em;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  background: var(--ink); color: #fff; border: 0; border-radius: 0;
  font: 600 17px/1 var(--body); text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.25); }
.btn.app { background: var(--app); color: var(--on-app); }
.btn.app:hover { filter: brightness(0.95); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.link { font: 600 17px/1 var(--body); text-decoration: underline; text-underline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Nav */
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px var(--gutter) 0; }
.nav .logo { font: 800 30px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
.nav ul { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.nav ul a:not(.btn) { font-weight: 600; font-size: 16px; text-decoration: none; }
.nav ul a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { background: var(--rojo); color: var(--ink); }
@media (max-width: 760px) {
  .nav { padding-top: 20px; }
  .nav ul { gap: 16px; }
  .nav ul li.app-link { display: none; }
}

/* Home hero */
.hero { position: relative; overflow: hidden; min-height: 980px; }
.hero .mark {
  position: absolute; z-index: 0; right: -2vw; top: -18vw;
  font: 800 94vw/1 var(--display); color: var(--azul); pointer-events: none; user-select: none;
}
.hero .wordmark { position: relative; z-index: 1; margin: clamp(80px, 12vw, 170px) 0 0 calc(var(--gutter) - 0.04em); font-size: clamp(96px, 28vw, 400px); line-height: 0.82; letter-spacing: -0.045em; }
.hero .text { position: relative; z-index: 1; display: grid; gap: 20px; padding: clamp(40px, 7vw, 100px) var(--gutter) 64px; max-width: 760px; }
.hero .line { font-size: clamp(30px, 3.1vw, 44px); letter-spacing: -0.02em; }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero .mark { font-size: 120vw; right: -30vw; top: -30vw; opacity: 1; }
}

/* App band (home) and app tile (app pages) share one pattern: text on top, the name cropped at the bottom. */
.band, .tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: var(--app); color: var(--on-app); }
.band { min-height: 720px; }
.band .info, .tile .info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
.band .info { padding: 64px var(--gutter) 40px; max-width: 800px; }
.band .huge, .tile .huge, .page-hero .huge { margin-bottom: -0.12em; transform: translateX(var(--x, -0.05em)); pointer-events: none; user-select: none; }
.band .info, .tile .info, .page-hero .info { position: relative; z-index: 1; }
.charla .huge { --x: -0.05em; }
.traduce .huge { --x: -0.2em; }
.verbos .huge { --x: 3vw; }
@media (max-width: 760px) { .band { min-height: 0; } .verbos .huge { --x: 1vw; } }

/* App page hero */
.page-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 900px; background: var(--app); color: var(--on-app); }
.page-hero .info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: start; padding: clamp(60px, 9vw, 130px) var(--gutter) 40px; max-width: 820px; }
.page-hero .huge { margin-top: auto; }
.page-hero .nav ul a:not(.btn) { color: var(--on-app); }
.page-hero .nav .logo { color: var(--on-app); }
@media (max-width: 760px) { .page-hero { min-height: 0; } }

/* Sections */
.section { padding: var(--section) var(--gutter); }
.section.tight { padding-top: 0; }
.section > .label { display: block; margin-bottom: 40px; color: var(--gris); }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step { display: grid; gap: 16px; align-content: start; }
.step .n { font: 800 clamp(120px, 14vw, 200px)/0.8 var(--display); letter-spacing: -0.04em; color: var(--app); }
.step h3 { font-size: clamp(34px, 3.3vw, 48px); line-height: 1; letter-spacing: -0.03em; margin-top: 12px; }
.step p { font-size: 18px; max-width: 24em; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 56px; } }

/* Keycaps */
.keys { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em;
  padding: 0.2em 0.5em; font: 800 22px/1 var(--display); color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-bottom-width: 5px; border-radius: 10px;
}
.keys .sep { font: 800 22px/1 var(--display); }

/* Set up */
.setup { display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: start; background: var(--ink); color: var(--paper); }
.setup .steps-col { display: grid; gap: 40px; justify-items: start; }
.setup .label { color: var(--app); }
.setup ol { list-style: none; margin: 0; padding: 0; width: 100%; counter-reset: s; }
.setup li { display: flex; align-items: baseline; gap: 28px; padding: 22px 0; border-top: 1px solid #333; font-size: clamp(18px, 1.6vw, 22px); counter-increment: s; }
.setup li a { color: inherit; }
.setup li::before { flex: none; content: counter(s, decimal-leading-zero); font: 400 15px/1 var(--mono); letter-spacing: 0.1em; color: var(--app); }
.setup .note { font-size: 17px; color: #a8a8a8; max-width: 40em; }
@media (max-width: 1100px) { .setup { grid-template-columns: 1fr; } }

/* Demo pictures inside Set up */
.demo { position: relative; min-height: 560px; padding: 40px; background: var(--paper); color: var(--ink); overflow: hidden; }
.demo .page { font: 400 26px/1.5 Georgia, "Times New Roman", serif; }
.demo mark { background: rgb(255 214 10 / 0.45); color: inherit; padding: 0 2px; }
.demo .card { position: absolute; right: 24px; bottom: 24px; width: 292px; display: grid; gap: 10px; padding: 22px; background: var(--ink); color: var(--paper); }
.demo .card .label { font-size: 11px; color: var(--app); }
.demo .card strong { font: 800 30px/1 var(--display); letter-spacing: -0.02em; }
.demo .chip { justify-self: start; margin-top: 6px; padding: 6px 10px; border: 1px solid #444; font-size: 13px; }
.demo.key { display: flex; flex-direction: column; justify-content: center; gap: 20px; background: var(--tiza); }
.demo .field { display: flex; flex-wrap: wrap; gap: 10px; }
.demo .input-mock { flex: 1 1 200px; min-width: 0; overflow: hidden; white-space: nowrap; padding: 16px 18px; border: 2px solid var(--ink); background: var(--paper); font: 400 16px/1 var(--mono); }
.demo .ok { color: var(--ok); font-size: 16px; }
.demo .quiz-q { font: 400 18px/1 var(--mono); }
.demo .answer { margin-top: 20px; padding: 16px 18px; border: 2px solid var(--ink); font: 800 36px/1 var(--display); letter-spacing: -0.02em; }
.demo .accents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 560px) { .demo { min-height: 460px; padding: 24px; } .demo .page { font-size: 21px; } .demo .card { left: 24px; width: auto; } }

/* No list */
.not { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px 80px; }
.not ul { margin: 0; padding: 0; list-style: none; }
.not li { white-space: nowrap; font: 800 clamp(44px, 11vw, 128px)/0.95 var(--display); letter-spacing: -0.04em; }
.not p { max-width: 420px; }

/* Questions */
.faq { display: grid; }
.faq div { display: grid; grid-template-columns: 560px 1fr; gap: 48px; padding: 28px 0; border-top: 1px solid var(--linea); }
.faq dt { font: 800 32px/1.1 var(--display); letter-spacing: -0.02em; }
.faq dd { margin: 0; font-size: 20px; }
@media (max-width: 960px) { .faq div { grid-template-columns: 1fr; gap: 10px; } .faq dt { font-size: 26px; } }

/* Tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tile { min-height: 520px; }
.tile .info { padding: 48px; gap: 20px; }
.tile h3 { font-size: clamp(36px, 3.3vw, 48px); line-height: 0.95; letter-spacing: -0.025em; }
.tile .huge { font-size: clamp(130px, 20.8vw, 300px); }
.tile.verbos .huge { --x: 1vw; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 0; } .tile .info { padding: 32px 24px; } .tile.verbos .huge { --x: 1vw; } }

/* hecho+ panel */
.plus { position: relative; overflow: hidden; min-height: 800px; background: var(--ink); color: var(--paper); }
.plus .mark { position: absolute; right: -6vw; top: 30px; font: 800 76vw/1 var(--display); color: var(--amarillo); pointer-events: none; user-select: none; }
.plus .info { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: start; max-width: 720px; }
.plus h2 { font-size: clamp(80px, 14vw, 200px); line-height: 0.85; letter-spacing: -0.04em; }
.plus .line { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; }
.form { display: flex; flex-wrap: wrap; }
.form input[type="email"] { width: min(420px, 100%); min-height: 56px; padding: 0 20px; border: 2px solid var(--paper); border-radius: 0; background: transparent; color: var(--paper); font: 400 17px var(--body); }
.form input::placeholder { color: #9a9a9a; }
.form .btn { min-height: 56px; background: var(--amarillo); color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { min-height: 1.5em; font-size: 17px; }
.msg.ok { color: var(--amarillo); font: 800 32px/1 var(--display); }
.msg.bad { color: #ff8a73; }
@media (max-width: 760px) { .plus { min-height: 0; } .plus .mark { opacity: 0.35; } }

/* Donate */
.donate { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--linea); }
.donate .text { display: grid; gap: 24px; max-width: 900px; }
.donate h2 { font-size: clamp(48px, 6.7vw, 96px); line-height: 0.95; letter-spacing: -0.03em; }
.donate .btn { background: var(--rojo); color: var(--ink); }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 48px var(--gutter); background: var(--tiza); }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot .logo { font: 800 24px/1 var(--display); text-decoration: none; }
.foot nav a:not(.logo) { font-size: 15px; text-decoration: none; }
.foot nav a:not(.logo):hover { text-decoration: underline; }
.foot .credits { display: grid; gap: 6px; justify-items: end; font: 400 12px/1.4 var(--mono); color: var(--gris); }
@media (max-width: 760px) { .foot .credits { justify-items: start; } }

/* Simple text pages: hecho+, privacy, not found */
.plain { max-width: 820px; padding: clamp(60px, 9vw, 120px) var(--gutter) var(--section); }
.plain h1 { font-size: clamp(64px, 11vw, 160px); line-height: 0.85; letter-spacing: -0.045em; }
.plain .lede { margin-top: 32px; font: 800 clamp(26px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: -0.02em; }
.plain h2 { margin: 56px 0 16px; font: 400 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.plain p + p { margin-top: 14px; }
.plain ul.items { margin: 0; padding: 0; list-style: none; }
.plain ul.items li { padding: 18px 0; border-top: 1px solid var(--linea); }
.plain ul.items strong { display: block; font: 800 26px/1.1 var(--display); letter-spacing: -0.02em; margin-bottom: 6px; }
.plain .form input[type="email"] { border-color: var(--ink); color: var(--ink); }
.plain .form .btn { background: var(--ink); color: #fff; }
.plain .msg.ok { color: var(--ink); }
.plain .msg.bad { color: var(--bad); }

/* Leer: the article list on the traduce page */
.page-hero.tabbed { min-height: 460px; }
.page-hero.tabbed .huge { margin-top: auto; }
.tabs { display: flex; gap: 40px; padding: 0 var(--gutter); border-bottom: 1px solid var(--linea); }
.tab {
  display: inline-flex; align-items: center; min-height: 72px; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font: 800 26px/1 var(--display); letter-spacing: -0.02em; color: var(--gris); text-decoration: none;
}
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab:hover { color: var(--ink); }
.pitch { display: grid; gap: 28px; justify-items: start; padding-bottom: 24px; }
.pitch .label { margin: 0; color: var(--gris); }
.panel[hidden] { display: none; }
.leer { padding: clamp(40px, 5vw, 64px) var(--gutter) var(--section); }
.leer-head { display: flex; }
.leer-title { font-size: clamp(44px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.035em; }
.leer-date { margin: 0; color: var(--gris); }
.leer-filters { display: grid; gap: 18px; padding: 32px 0 24px; }
.leer-filter { display: flex; align-items: center; gap: 12px; }
.leer-filter .label { flex: none; width: 90px; margin: 0; color: var(--gris); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 38px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 0; background: var(--paper); color: var(--ink);
  font: 600 15px/1 var(--body); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.articles { list-style: none; margin: 0; padding: 0; }
.article {
  display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 40px; padding: 28px 0;
  border-bottom: 1px solid var(--linea); color: var(--ink); text-decoration: none;
}
.article-meta { display: grid; gap: 10px; justify-items: start; }
.article-topic, .article-level { font: 400 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.article-level { padding: 6px 8px; border: 1px solid var(--ink); }
.article-text { display: grid; gap: 8px; }
.article-title { font: 800 clamp(23px, 2.3vw, 32px)/1.05 var(--display); letter-spacing: -0.025em; text-wrap: pretty; }
.article:hover .article-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.article-source { font-size: 16px; color: var(--gris); }
.article-open { font-size: 28px; line-height: 1; }
.leer-empty { padding: 28px 0; }
@media (max-width: 760px) {
  .page-hero.tabbed { min-height: 0; }
  .page-hero.tabbed .huge { margin-top: 40px; }
  .tabs { gap: 28px; }
  .tab { min-height: 60px; font-size: 22px; }
  .leer-head { display: grid; gap: 6px; }
  .leer-filters { padding: 24px 0 8px; margin: 0 calc(-1 * var(--gutter)); }
  .leer-filter { display: grid; gap: 8px; }
  .leer-filter .label { padding: 0 var(--gutter); }
  .leer-filter .chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none; }
  .leer-filter .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .article { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .article-meta { display: flex; align-items: center; gap: 10px; }
  .article-level { padding: 4px 6px; font-size: 12px; }
  .article-open { display: none; }
}