/* «Aprende con Yema» (landing/tools/learn.mjs): a guide reads like a page of the app's lessons, one column of text on
   a phone, with Yema (or Tosti, or Pincho) telling it in a bubble, a summary, the questions, the numbered sources and a
   way to try Yema beside it on a desktop. The hub groups the guides by topic as cards. DS tokens, light only. */

.ln{padding:20px 0 72px}
.ln-wrap{max-width:1120px}
.ln-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none;font-size:14px;line-height:20px;color:var(--ink-muted)}
.ln-crumbs li + li::before{content:"›";margin-right:6px;color:var(--line-strong)}
.ln-crumbs a{color:var(--ink-muted);text-decoration:none;font-weight:600}
.ln-crumbs a:hover{color:var(--berry)}
.ln-crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ===== A guide ===== */
.ln-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.ln-art{max-width:720px;font-size:18px;line-height:29px;color:var(--ink);text-wrap:pretty}
.ln-head .lp-kicker{margin:0 0 12px}
.ln-head .lp-kicker a{color:inherit;text-decoration:none}
.ln-art h1{margin:0 0 22px;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.6vw,54px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.ln-who{display:flex;align-items:flex-end;gap:14px;margin:0 0 18px}
.ln-who-char{flex:none;width:112px}
.ln-who-char svg{display:block;width:100%;height:auto}
.ln-bubble{position:relative;flex:1;padding:16px 20px;border-radius:22px;background:var(--surface-raised);box-shadow:var(--shadow-lg)}
.ln-bubble::after{content:"";position:absolute;left:-7px;bottom:22px;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:0 0 0 4px}
.ln-intro{margin:0;font-size:18px;line-height:27px;font-weight:600}
.ln-who-n{display:flex;flex-wrap:wrap;gap:4px 8px;margin:8px 0 0;font-size:14px;line-height:20px;color:var(--ink-muted)}
.ln-who-n b{color:var(--berry)}
.ln-date{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.ln-sec h2,.ln-faq h2,.ln-src h2{margin:40px 0 12px;font-size:26px;line-height:33px;font-weight:700;scroll-margin-top:calc(var(--head) + 12px)}
.ln-sec p{margin:0 0 16px}
.ln-ref{font-size:.68em;line-height:0;margin-left:1px}
.ln-ref a{color:var(--berry);font-weight:700;text-decoration:none;padding:0 2px}
.ln-ref a:hover{text-decoration:underline}
.ln-sum{margin:36px 0 0;padding:22px 24px;border-radius:var(--radius-xl);background:var(--berry-soft)}
.ln-sum h2{margin:0 0 6px;font-size:16px;line-height:22px;font-weight:700;letter-spacing:.02em;color:var(--berry)}
.ln-sum p{margin:0;font-weight:600}
.ln-qa{padding:16px 0;border-bottom:1px solid var(--line)}
.ln-qa h3{margin:0 0 6px;font-size:19px;line-height:26px;font-weight:700}
.ln-qa p{margin:0;color:var(--ink-muted);font-size:17px;line-height:27px}
.ln-src ol{margin:0;padding-left:22px;font-size:15px;line-height:22px;color:var(--ink-muted)}
.ln-src li{margin:0 0 10px;scroll-margin-top:calc(var(--head) + 12px)}
.ln-src li::marker{color:var(--berry);font-weight:700}
.ln-src a{display:block;color:var(--link);font-weight:700;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.ln-src li:target{background:var(--yolk-soft);border-radius:8px}
.ln-note{display:flex;align-items:flex-start;gap:10px;margin:36px 0 0;padding:16px 18px;border-radius:var(--radius-lg);background:var(--surface-sunken);font-size:15px;line-height:22px;color:var(--ink-muted)}
.ln-note svg{flex:none;margin-top:2px;color:var(--berry)}

/* Try Yema: beside the guide on a desktop, after it on a phone. */
.ln-cta{position:sticky;top:calc(var(--head) + 24px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px;border-radius:var(--radius-xl);background:var(--berry);color:var(--on-berry)}
.ln-cta h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.1}
.ln-cta p{margin:0;font-size:16px;line-height:24px}
.ln-cta .ln-cta-lesson{opacity:.9;font-size:14px;line-height:20px}
.ln-cta-char{width:110px}
.ln-cta-char svg{display:block;width:100%;height:auto}
.ln-cta .lp-soon{min-height:48px;padding:10px 20px;font-size:15px;line-height:20px;margin-top:4px}
.ln-cta-wide{position:static;flex-direction:row;align-items:center;gap:24px;margin:40px 0 0}
.ln-cta-wide > div{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

/* Cards (the hub and «Sigue aprendiendo»). */
.ln-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.ln-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:6px;height:100%;box-sizing:border-box;padding:18px;border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
.ln-card:hover{box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--berry-mark);transform:translateY(-2px)}
.ln-card-pic{grid-row:1 / 4;width:56px}
.ln-card-pic svg{display:block;width:100%;height:auto}
.ln-card-t{font-size:18px;line-height:24px;font-weight:700}
.ln-card-d{font-size:15px;line-height:22px;color:var(--ink-muted)}
.ln-card-by{align-self:end;font-size:13px;line-height:18px;font-weight:700;color:var(--berry)}
.ln-rel{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.ln-rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}
.ln-rel-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.1}
.ln-rel-head a{color:var(--link);font-weight:700;font-size:15px}

/* ===== The hub ===== */
.ln-hub{display:flex;align-items:center;gap:24px;margin:0 0 22px}
.ln-hub-char{flex:none;width:150px}
.ln-hub-char svg{display:block;width:100%;height:auto}
.ln-hub h1{margin:0 0 10px;font-family:var(--font-display);font-weight:400;font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-.01em}
.ln-hub-lead{margin:0;max-width:40em;font-size:19px;line-height:29px;color:var(--ink-muted);text-wrap:pretty}
.ln-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ln-chips a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:9999px;background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:700 15px/20px var(--font-sans);text-decoration:none}
.ln-chips a:hover{color:var(--berry)}
.ln-chips svg{color:var(--berry)}
.ln-topic{margin:40px 0 0;scroll-margin-top:calc(var(--head) + 12px)}
.ln-topic-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.ln-topic-pic{flex:none;width:64px}
.ln-topic-pic svg{display:block;width:100%;height:auto}
.ln-topic-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.1}
.ln-topic-head p{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}

@media (max-width:959px){
.ln-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.ln-cta{position:static}
}
@media (max-width:719px){
.ln{padding:14px 0 56px}
.ln-art{font-size:17px;line-height:27px}
.ln-who{flex-direction:column;align-items:flex-start;gap:10px}
.ln-who-char{width:88px}
.ln-bubble::after{left:28px;bottom:auto;top:-7px;border-radius:4px 0 0 0}
.ln-intro{font-size:17px;line-height:25px}
.ln-sec h2,.ln-faq h2,.ln-src h2{margin-top:32px;font-size:22px;line-height:28px}
.ln-qa h3{font-size:17px;line-height:24px}
.ln-qa p{font-size:16px;line-height:25px}
.ln-hub{flex-direction:column;align-items:flex-start;gap:12px}
.ln-hub-char{width:104px}
.ln-hub-lead{font-size:17px;line-height:26px}
.ln-topic-head h2{font-size:28px}
.ln-cta-wide{flex-direction:column;align-items:flex-start}
.ln-rel-head{flex-direction:column;gap:6px}
}