/* Retokea landing pages. Static, JS-free. Shared by /es/, /pt/ and future /en/ spokes.
   Matches the app's editorial "paper" theme without importing any of its 166KB. */

:root {
  --bg:#f3efe6; --paper:#faf8f2; --card:#fff; --line:#ddd5c4; --hair:#cfc7b6;
  --ink:#1b1815; --dim:#6e675e; --faint:#776e5f;
  --cobalt:#1f3bd6; --cobalt-deep:#1830b8; --cobalt-wash:#eef1ff;
  --gold:#84590f; --goldb:#e7b53c;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Schibsted Grotesk',-apple-system,system-ui,sans-serif;
}

@font-face { font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/fonts/schibsted-latin.woff2) format('woff2') }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/fonts/newsreader-latin.woff2) format('woff2') }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(/fonts/newsreader-latin-italic.woff2) format('woff2') }

* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans);
       -webkit-font-smoothing:antialiased }

header { background:var(--cobalt); color:#fff }
header .w { max-width:760px; margin:0 auto; padding:14px 18px; display:flex;
            justify-content:space-between; align-items:center; gap:14px }
header a.brand { font-family:var(--serif); font-weight:600; font-size:1.5rem; color:#eef1ff;
                 text-decoration:none; letter-spacing:-.01em }
header nav { display:flex; gap:16px; flex-wrap:wrap; font-size:.87rem }
header nav a { color:#dfe4ff; text-decoration:none }
header nav a:hover { color:#fff; text-decoration:underline }

main { max-width:760px; margin:0 auto; padding:0 18px 60px }

h1 { font-family:var(--serif); font-weight:600; font-size:2.1rem; line-height:1.14;
     letter-spacing:-.018em; margin:34px 0 14px; text-wrap:balance }
h2 { font-family:var(--serif); font-weight:600; font-size:1.42rem; line-height:1.2;
     letter-spacing:-.012em; margin:38px 0 12px; text-wrap:balance }
h3 { font-family:var(--sans); font-weight:700; font-size:1rem; margin:22px 0 8px }
p { margin:0 0 14px }
.lede { font-size:1.1rem; color:var(--dim); margin-bottom:22px }
a { color:var(--cobalt) }
strong { font-weight:700 }

/* Hero CTA — styled like the app's drop zone so the hand-off reads as the same product. */
.cta { display:block; text-align:center; text-decoration:none; background:var(--cobalt); color:#fff;
       border-radius:14px; padding:20px 22px; margin:26px 0; font-weight:700; font-size:1.06rem;
       box-shadow:0 10px 28px rgba(31,59,214,.26) }
.cta:hover { background:var(--cobalt-deep) }
.cta .sub { display:block; font-weight:400; font-size:.86rem; color:#dfe4ff; margin-top:5px }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; padding:0; list-style:none }
.chips li { background:var(--card); border:1px solid var(--hair); border-radius:999px;
            padding:6px 13px; font-size:.83rem; color:var(--dim) }

table { width:100%; border-collapse:collapse; margin:14px 0 18px; font-size:.93rem;
        background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden }
caption { text-align:left; font-size:.85rem; color:var(--faint); padding-bottom:7px }
th, td { text-align:left; padding:10px 13px; border-bottom:1px solid var(--line) }
th { background:var(--paper); font-weight:700; font-size:.82rem; letter-spacing:.02em;
     text-transform:uppercase; color:var(--dim) }
tr:last-child td { border-bottom:0 }
td.n { font-family:var(--serif); font-size:1.04rem; white-space:nowrap }
.tw { overflow-x:auto }

/* Static before/after pair — no slider, no JS. Google Images can read both. */
.ba { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 8px }
.ba figure { margin:0 }
.ba img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:10px;
          background:#e9e4d8; display:block }
.ba figcaption { font-size:.78rem; color:var(--faint); margin-top:6px; letter-spacing:.03em;
                 text-transform:uppercase; font-weight:700 }

details { background:var(--card); border:1px solid var(--line); border-radius:10px;
          padding:13px 16px; margin-bottom:9px }
summary { cursor:pointer; font-weight:600; font-size:.96rem }
details[open] summary { margin-bottom:9px }
details p:last-child { margin-bottom:0 }

.note { background:var(--cobalt-wash); border-radius:10px; padding:14px 16px; font-size:.92rem;
        margin:18px 0 }

footer { border-top:1px solid var(--line); max-width:760px; margin:0 auto; padding:22px 18px 40px;
         font-size:.85rem; color:var(--dim); display:flex; justify-content:space-between;
         align-items:center; gap:14px; flex-wrap:wrap }
footer a { color:var(--dim) }
.langlinks { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--hair);
             border-radius:8px; padding:3px; background:var(--card) }
.langlinks a { color:var(--dim); font-size:.82rem; text-decoration:none; padding:5px 11px;
               border-radius:6px; display:inline-flex; align-items:center; min-height:24px }
.langlinks a:hover { color:var(--ink); background:var(--bg) }
.langlinks a[aria-current] { color:var(--cobalt); background:var(--cobalt-wash); font-weight:600 }

@media (max-width:560px) {
  h1 { font-size:1.68rem } h2 { font-size:1.24rem }
  .ba { grid-template-columns:1fr }
  header .w { flex-direction:column; align-items:flex-start; gap:9px }
}