/* The Nudito Studio look, shared by the landing page and every app:
   colour tokens, type, the page shell, the brand mark, the language bar,
   buttons and the footer. Anything only one app needs belongs in that app's
   own stylesheet, which loads after this one. */

:root{
    --board:#2E8B99; --board-deep:#1F6773;
    --paper:#FFFDF8; --paper-2:#F6EFE6;
    --ink:#22303A; --ink-soft:#5F7079;
    --line:#E4D9CB; --accent:#E8628A; --accent-dark:#C24C71;
    --radius:18px; --shadow:0 2px 0 rgba(34,48,58,.06), 0 10px 30px -18px rgba(34,48,58,.45);
  }
  *{box-sizing:border-box}
  body{margin:0; background:radial-gradient(1200px 600px at 85% -10%, #FDF3E7 0%, transparent 60%), var(--paper-2);
       color:var(--ink); font-family:'Nunito',ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:1.5}
  h1,h2{font-family:'Baloo 2',ui-rounded,sans-serif; font-weight:800; line-height:1.15; margin:0}
  .wrap{max-width:1160px; margin:0 auto; padding:0 18px 60px; position:relative}
  [hidden]{display:none !important}

  /* ---------- language bar ---------- */
  .langbar{position:absolute; top:18px; right:18px; display:flex; gap:3px; padding:3px;
    background:var(--paper); border:1px solid var(--line); border-radius:999px; z-index:30}
  .lang{all:unset; cursor:pointer; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800;
    color:var(--ink-soft); letter-spacing:.05em; transition:.15s ease}
  .lang:hover{color:var(--ink)}
  .lang:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .lang[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
  @media (max-width:520px){ .langbar{top:12px; right:12px} header.top{padding-top:52px} }

  /* ---------- header and brand ---------- */
  header.top{padding:26px 0 22px; text-align:center}
  /* El logo toma el color del texto: cámbialo aquí si lo quieres en otro tono. */
  .brand{width:clamp(140px,21vw,208px); margin:0 auto 4px; color:var(--ink)}
  .brand svg{display:block; width:100%; height:auto}
  .eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--accent-dark)}
  header.top h1{font-size:clamp(30px,6vw,50px); margin:6px 0}
  header.top p{margin:0 auto; max-width:46ch; color:var(--ink-soft); font-size:15px}

  /* ---------- back to the landing page, shown inside an app ---------- */
  .backbar{position:absolute; top:18px; left:18px; z-index:30}
  .backlink{display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 11px;
    font-size:12px; font-weight:800; color:var(--ink-soft); letter-spacing:.03em; transition:.15s ease}
  .backlink:hover{color:var(--ink); border-color:var(--ink)}
  .backlink:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .backlink span{font-size:15px; line-height:1}
  @media (max-width:520px){ .backbar{top:12px; left:12px} }

  /* ---------- pill buttons ----------
     An app can restyle these; its own sheet loads afterwards. */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:16px; text-decoration:none;
    padding:14px 22px; border-radius:999px; border:2px solid transparent; transition:.15s ease}
  .btn-primary{background:var(--accent); color:#fff}
  .btn-primary:hover{background:#F27499; transform:translateY(-1px)}
  .btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn-outline:hover{border-color:var(--ink)}
  .btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}

  /* ---------- footer ---------- */
  footer{text-align:center; color:var(--ink-soft); font-size:12.5px; padding:26px 0 0}