/* Digital bookshelf. Pure CSS — no JS, no external fonts, no network requests. */

:root {
  --ink: #f4f2ee;
  --ink-dim: #9a978f;
  /* Muted text. Not darker than this: below it the contrast on --bg drops under
     the 4.5:1 that WCAG AA asks for body text, and these greys carry real content
     (the search demo's coverage line, the price note, the client details). */
  --ink-mute: #8a8880;
  --bg: #14151a;
  --accent: #c8a86b;
  /* The plank: a warm edge lit from above, dark underneath. */
  --plank-face: #4a3f34;
  --plank-edge: #6b5a49;
  --plank-shadow: rgba(0, 0, 0, 0.55);
  --shelf-gap: clamp(1.6rem, 4vw, 3rem);
  /* Reserved height for a book's caption. The plank is positioned against it,
     so it must stay in sync with the .book-title / .book-meta block. */
  --caption-h: 3.3rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Faint glow behind the masthead so the flat background has some depth. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, #1e2028 0%, var(--bg) 60%);
  z-index: -1;
}

/* ---------- Masthead ---------- */

.masthead {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) clamp(1.2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}

.brand {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.tagline {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}

/* ---------- Library ---------- */

.library {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem) 4rem;
}

.empty {
  color: var(--ink-dim);
  padding: 3rem 0;
}

.shelf { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.shelf-title {
  margin: 0 0 1.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/*
 * The row is the stage. Books sit ON the plank, which is drawn as the row's own
 * ::after so it always spans the full width regardless of how many books there
 * are. `perspective` gives the plank its thickness when tilted.
 */
/* A fixed grid, not a flex line: with flex the books bunched up on the left and
   the plank ran on past them, leaving a dead margin on the right. Equal columns
   spread them across the full width of the plank, and a short last row keeps its
   books in place instead of stretching them. Rows are fixed by the generator
   (PER_ROW) because a plank is positioned against the bottom of ITS row. */
.shelf-row {
  position: relative;
  display: grid;
  /* As many columns as books in THIS row (--n), never a fixed four: a half-filled
     row then spreads its books across the full width instead of huddling on the
     left with a long stretch of empty shelf to the right. */
  grid-template-columns: repeat(var(--n, 4), 1fr);
  justify-items: center;
  align-items: end;
  gap: var(--shelf-gap);
  padding: 0 clamp(0.5rem, 2vw, 1.5rem) 0.6rem;
  margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
  perspective: 900px;
}

@media (max-width: 700px) {
  /* Two per row on a phone; the generator's four would be unreadable. A row that
     holds a single book keeps one column, or that lone book would sit in the left
     half with an empty right half beside it. */
  .shelf-row { grid-template-columns: repeat(2, 1fr); }
  .shelf-row[data-n='1'] { grid-template-columns: 1fr; }
}

/*
 * The plank sits exactly at the foot of the covers, so the books rest ON it and
 * their captions hang below. That alignment depends on the caption occupying a
 * KNOWN height (--caption-h) — hence the fixed block below and the 2-line clamp
 * on the title. Without it, a two-line title on one book would shift the plank.
 *
 * Every book carries its OWN length of plank, and the lengths butt together into
 * a continuous shelf. It looks like one bar, but it is not: a single absolute bar
 * per row can only sit at ONE height, and on a phone the four books of a row wrap
 * onto two lines, so the upper line was left floating with nothing under it. A
 * length per book follows however the row happens to wrap, at any width.
 */
.book::after {
  content: "";
  position: absolute;
  /* Half the gap either side, so neighbouring lengths meet with no seam. */
  left: calc(var(--shelf-gap) / -2);
  right: calc(var(--shelf-gap) / -2);
  bottom: var(--caption-h);
  height: 13px;
  /* Decorative, and it overlaps the foot of the cover: without this it would
     swallow taps meant for the book behind it. */
  pointer-events: none;
  border-radius: 2px;
  background:
    linear-gradient(180deg, var(--plank-edge) 0%, var(--plank-face) 42%, #2f271f 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 16px 24px -12px var(--plank-shadow);
}

/* ---------- Books ---------- */

.book {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Fixed-height caption block, sitting below the plank. */
.book-caption {
  height: var(--caption-h);
  padding-top: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.book-cover {
  position: relative;
  display: block;
  width: 100%;
  /* The cover keeps its size; the link around it now spans the whole grid cell,
     because that link is what draws this book's length of plank. */
  max-width: 190px;
  margin-inline: auto;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/*
 * Two shadows do the work of "resting on wood":
 * a short, dark contact shadow right at the foot...
 */
.book-cover::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -6px;
  height: 10px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.65), transparent 75%);
  filter: blur(3px);
  transition: opacity 220ms ease;
}

.book-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px 3px 3px 1px;
  /* ...and the cast shadow plus a lit spine edge on the left. */
  box-shadow:
    0 10px 18px -8px rgba(0, 0, 0, 0.8),
    -3px 0 0 rgba(255, 255, 255, 0.06) inset,
    -6px 0 10px -6px rgba(0, 0, 0, 0.5) inset;
  transition: box-shadow 220ms ease;
}

.book-title {
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  /* Two lines max, so every caption is the same height as --caption-h assumes. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-meta {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--ink-dim);
}

/* Lift the book off the shelf, deepening the cast shadow as it rises. The cover
   moves, not the link: the link draws this book's length of plank, and lifting it
   would tear the wood away from the shelf beside it. */
.book:hover .book-cover,
.book:focus-visible .book-cover {
  transform: translateY(-8px);
}

.book:hover .book-cover img,
.book:focus-visible .book-cover img {
  box-shadow:
    0 22px 30px -12px rgba(0, 0, 0, 0.85),
    -3px 0 0 rgba(255, 255, 255, 0.08) inset,
    -6px 0 10px -6px rgba(0, 0, 0, 0.5) inset;
}

.book:hover .book-cover::after,
.book:focus-visible .book-cover::after {
  opacity: 0.5;
}

.book:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ---------- Footer ---------- */

.footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem clamp(1.2rem, 5vw, 3rem) 3rem;
  border-top: 1px solid #24262e;
  color: var(--ink-mute);
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .book-cover,
  .book-cover img,
  .book-cover::after {
    transition: none;
  }
}

/* =========================================================================
   Sitio (home / publicaciones / servicio). Lo anterior es la estantería.
   ========================================================================= */

.wrap,
.site-header,
.masthead,
.library,
.section,
.page-head,
.footer-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 5vw, 3rem);
}

/* ---------- Cabecera y navegación ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  flex-wrap: wrap;
}

.site-brand {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
}

.site-nav { display: flex; gap: 1.4rem; }

.nav-link {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.9rem;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Finger-sized hit area (44px, the WCAG 2.2 floor) without enlarging the text or
   dropping the underline away from it. The overlay is invisible and stays inside
   the 1.4rem gap between links, so neighbours never steal each other's taps. */
.site-brand,
.nav-link { position: relative; }

.site-brand::before,
.nav-link::before {
  content: '';
  position: absolute;
  inset: -0.65rem -0.375rem;
}

/* ---------- Hero ---------- */

.hero {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(3rem, 10vw, 7rem) clamp(1.2rem, 5vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.hero-title {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
}

/* Segunda línea del titular: mismo bloque, un peso menos, para que la promesa
   principal (la conversión) y la de propiedad se lean como una sola idea. */
.hero-title-sub { color: var(--accent); }

.hero-lede {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  color: var(--ink-dim);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.65;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.btn-primary { background: var(--accent); color: #1a1408; }
.btn-primary:hover { transform: translateY(-2px); background: #d8bb7c; }
.btn-ghost { border-color: #3a3d47; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-dim); transform: translateY(-2px); }

/* ---------- Secciones ---------- */

.section { padding-block: clamp(2.5rem, 7vw, 5rem); }

.section-title {
  margin: 0 0 1.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-lede {
  margin: -0.8rem 0 2rem;
  max-width: 34rem;
  color: var(--ink-dim);
}

.section-more { margin-top: 1.6rem; font-size: 0.9rem; }
.section-more a { color: var(--ink-dim); text-decoration: none; }
.section-more a:hover { color: var(--accent); }

.page-head { padding-block: clamp(2.5rem, 8vw, 5rem) 1rem; }
.page-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.03em;
  font-weight: 600;
}
.page-lede { margin: 1rem 0 0; max-width: 34rem; color: var(--ink-dim); }

/* ---------- Demo de búsqueda ---------- */

.demo-box {
  border: 1px solid #24262e;
  border-radius: 14px;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: #181920;
}

.demo-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.6rem;
}

.demo-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
  color: var(--ink);
  background: #101118;
  border: 1px solid #2f323c;
  border-radius: 10px;
}
.demo-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.demo-coverage { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--ink-mute); }

.demo-results { margin-top: 1.2rem; display: grid; gap: 0.5rem; }

.demo-hit {
  display: block;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: #101118;
  border: 1px solid #22242c;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.55;
}
.demo-hit:hover { border-color: var(--accent); color: var(--ink); }
.demo-hit mark { background: rgba(200, 168, 107, 0.28); color: var(--ink); border-radius: 2px; }
.demo-hit .hit-src { display: block; font-size: 0.75rem; color: var(--ink-mute); margin-bottom: 0.25rem; }

.demo-empty { color: var(--ink-mute); font-size: 0.88rem; }

.demo-samples { margin-top: 1.4rem; display: grid; gap: 1rem; }
.demo-sample {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid #2f323c;
  color: #77756f;
  font-size: 0.85rem;
  line-height: 1.6;
}
.demo-sample p { margin: 0 0 0.4rem; }
.demo-sample cite { font-style: normal; font-size: 0.75rem; color: var(--ink-mute); }
.demo-note { color: var(--ink-mute); font-size: 0.85rem; }

/* ---------- Comparativa ---------- */

.compare-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .compare-grid { grid-template-columns: 1fr 1fr; } }

.compare-col {
  border: 1px solid #24262e;
  border-radius: 14px;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.compare-col h3 { margin: 0 0 0.9rem; font-size: 1rem; font-weight: 600; }
.compare-them { background: #16171d; }
.compare-them h3 { color: #7c7a74; }
.compare-us { background: #181d1b; border-color: #2c3a33; }
.compare-us h3 { color: var(--accent); }

.compare-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  padding: 0.6rem 0.75rem;
  border-radius: 7px;
  background: #0e0f14;
  color: #8b8983;
  overflow-x: auto;
  margin: 0 0 0.9rem;
}
.compare-us .compare-code { color: #b9d3c4; }
.compare-text { margin: 0; color: var(--ink-dim); font-size: 0.9rem; line-height: 1.6; }

/* ---------- Pasos ---------- */

.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.steps-list li { display: flex; gap: 1rem; align-items: baseline; }
.step-n {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid #3a3d47;
  font-size: 0.8rem;
  color: var(--accent);
}
.step-t { color: var(--ink-dim); line-height: 1.6; }

/* ---------- Clientes ---------- */

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  border-top: 1px solid #24262e;
}
.client {
  padding: 1.1rem 0.2rem;
  border-bottom: 1px solid #24262e;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.client-name { font-size: 1.02rem; font-weight: 500; }
.client-detail { font-size: 0.8rem; color: var(--ink-mute); }

/* ---------- Servicio ---------- */

.prose p { color: var(--ink-dim); line-height: 1.7; max-width: 38rem; }

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.feature-list h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; }
.feature-list p { margin: 0; font-size: 0.9rem; }

.price-line { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; color: var(--ink); }
.price-line strong { color: var(--accent); }
.price-tax { font-size: 0.55em; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.price-note { margin: 0.3rem 0 1.2rem; font-size: 0.9rem; color: var(--ink-mute); }

/* ---------- CTA ---------- */

.cta {
  border-top: 1px solid #24262e;
  margin-top: 2rem;
}
.cta-title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  font-weight: 600;
}
.cta-lede { margin: 0; max-width: 34rem; color: var(--ink-dim); }

/* ---------- Pie ---------- */

.site-footer { border-top: 1px solid #24262e; margin-top: 3rem; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  padding-block: 2.4rem 1.5rem;
}
.footer-brand { margin: 0 0 0.3rem; font-weight: 600; }
.footer-note { margin: 0; color: var(--ink-mute); font-size: 0.85rem; max-width: 26rem; }
/* No gap: the padding on each link IS the spacing, and it doubles as the 44px
   touch target these two need most — on a phone they are the way to get in touch. */
.footer-contact { display: flex; flex-direction: column; }
.footer-contact a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.9rem;
  padding-block: 0.75rem;
}
.footer-contact a:hover { color: var(--accent); }
/* Copyright and legal links share the last line, stacking on a narrow screen. */
.footer-bottom {
  max-width: 72rem;
  margin-inline: auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: baseline;
  justify-content: space-between;
}
.footer-legal {
  margin: 0;
  color: var(--ink-mute);
  font-size: 0.78rem;
}
.footer-links { display: flex; gap: 1.4rem; }
.footer-link {
  position: relative;
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 0.78rem;
}
.footer-link:hover { color: var(--accent); }
.footer-link[aria-current='page'] { color: var(--ink-dim); }
/* Same invisible overlay as the header links: a finger-sized target without
   changing how the line looks. Stays inside the 1.4rem gap. */
.footer-link::before {
  content: '';
  position: absolute;
  inset: -0.8rem -0.375rem;
}

/* ---------- Legal pages ---------- */

.legal > * { max-width: 44rem; }
.legal h2 {
  margin: 2.4rem 0 0.8rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; color: var(--ink-dim); font-size: 0.95rem; }
.legal a { color: var(--accent); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal-data {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--ink-dim);
  font-size: 0.95rem;
}
.legal-data li { margin-bottom: 0.35rem; }
.legal-updated {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid #24262e;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-link { transition: none; }
}