/* ROA Credit — landing.css
   Layout ONLY for cooperativa.roahost.com's single landing page.
   tokens.css defines colour/type/space/motion. base.css defines the reset,
   fonts, .container, .btn, .note, .logo, .skip-link. This sheet adds only
   what those two do not already give a one-page, single-column layout.
   Same bans as base.css: no *-gradient(), no text-shadow, no seals/badges,
   no emoji in headings/buttons/trust copy. See AESTHETIC-THESIS.md §5, §8, §9. */

/* ── Top bar — 56px, not sticky, no nav menu (§5 row 0) ───────────────
   Verified at 390×844: logo (124px) + "Contáctenos" (~110px) + gap fit
   inside a 342px content column (390 − 2×24px container padding) with
   room to spare. flex-wrap: nowrap + flex-shrink: 0 on both children is
   the hard guarantee — neither may wrap or collide at any width ≥360px. */
.topbar { padding-block: 0; border-bottom: 1px solid var(--border); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--s-3);
  min-height: 56px;
}
.topbar__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.topbar__logo img { height: 31px; width: auto; } /* overrides base .logo img 40px — still ≥32px cap-height per §3.6 G1 down to the pixel, and small enough to never crowd the contact link */
.topbar__contact {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: var(--tap);
  padding-inline: var(--s-2);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Hero (§5 row 1) — renders in its final state, nothing animates ── */
.hero { padding-block: var(--s-7) var(--s-8); }
.hero h1 { margin-bottom: var(--s-4); }
.hero__sub { color: var(--ink); margin-bottom: var(--s-5); }

/* The fastest binary test the visitor can run — full contrast, not a badge */
.hero__proof {
  border-left: 4px solid var(--border-strong);
  background: var(--surface-raised);
  padding: var(--s-4);
  border-radius: var(--radius);
  font-size: var(--t-decision);
  margin-bottom: var(--s-6);
}
.hero__proof strong { color: var(--ink); }

.hero__cta { margin-bottom: var(--s-3); }

.microcopy {
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-bottom: 0;
  max-width: var(--measure);
}

/* ── All primary CTAs on this page — full-width, 64px, identical label ── */
.btn--primary.btn--full {
  min-height: 64px;
  font-size: var(--t-decision);
}

/* ── §2 Qué NO somos — the primacy slot, every line full contrast ──── */
.section--no-somos h3 {
  font-size: var(--t-h3);
  margin-top: var(--s-6);
}
.section--no-somos .statement--full {
  /* «No somos un banco. No prestamos plata nuestra.» — the single most
     credibility-generating sentence available (BRIEF.md §6.6 rule 2).
     Full contrast, prominent, running text — never a badge (Benway 1998). */
  margin-top: var(--s-4);
}
.section--no-somos p { color: var(--ink-muted); font-size: var(--t-body); }

/* ── §3 La puerta que sí se abre — the signature moment ─────────────── */
.section--puerta { background: var(--surface-raised); }

.tagpairs {
  list-style: none;
  margin: var(--s-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.tagpair {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--radius);
  opacity: 1;
  transform: none;
}
.tagpair__no {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body);
  color: var(--ink-muted);
  font-weight: 400;
}
.tagpair__yes {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}
.tagpair__glyph { color: var(--green); }

/* Inline SVG glyphs only — Bitter and Atkinson Hyperlegible Next carry none
   of the four check/cross/info/warning symbol codepoints, and a system-font
   fallback risks rendering as colour emoji on Android. Geometric flat
   strokes, sized in em, currentColor — meaning always lives in the
   adjacent word, never in the icon. */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Progressive enhancement ONLY — the one permitted animation on the page
   (§6.4). Fires once per element on scroll entry, 260ms, ≤16px travel.
   Renders already in its final visible state everywhere else, and
   prefers-reduced-motion (tokens.css) forces every duration to ~0
   regardless of support. Additive on top of a visible default: nothing
   is ever left at opacity 0. Zero JavaScript. */
@supports (animation-timeline: view()) {
  .tagpair {
    animation: tagpair-reveal 260ms cubic-bezier(0, 0, 0.2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes tagpair-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.section--puerta .lead { margin-top: var(--s-6); }

/* ── §4 Lo que pedimos — requirements are the proof, not a footnote ── */
.requisitos {
  list-style: none;
  margin: var(--s-5) 0 var(--s-6);
  padding: 0;
}
.requisitos li {
  padding: var(--s-3) 0 var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-body);
  position: relative;
}
.requisitos li:last-child { border-bottom: none; }
.requisitos li::before {
  content: "";
  position: absolute; left: 0; top: 1.35em;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--border-strong);
}

.section--pedimos .note { margin-bottom: var(--s-4); }
.section--pedimos .note .icon { margin-top: 0.15em; }
.section--pedimos .lead { margin-top: var(--s-6); color: var(--ink-muted); }

/* ── §5 Quiénes somos — the recency slot ─────────────────────────────── */
.section--quienes { background: var(--surface-sunken); }
.trust-block {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--elevation);
  margin-bottom: var(--s-6);
}
.trust-block p { color: var(--ink-muted); margin-bottom: 0; }

/* ── Footer — the permanent record (§5 row 6) ────────────────────────── */
.site-footer {
  background: var(--surface-sunken);
  padding-block: var(--s-7);
  border-top: 1px solid var(--border);
}
.site-footer p {
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: none;
}
.site-footer__meta { margin-bottom: 0; }

/* ── Desktop — same single column, wider breathing room only ────────── */
@media (min-width: 768px) {
  .hero { padding-block: var(--s-9); }
  section { padding-block: var(--s-9); }
}

/* ── Icon colour tokens ───────────────────────────────────────────
   These exist as CLASSES, not inline style="", because _headers sets
   a strict CSP of `style-src 'self'` with no 'unsafe-inline'. Inline
   style attributes render fine locally and are SILENTLY STRIPPED on
   Cloudflare Pages. Caught at Phase 5 integration, not in production. */
.icon--info    { color: var(--info); }
.icon--warning { color: var(--warning); }
.icon--green   { color: var(--green); }