/* Tokens de Semillero, extraídos de semillero-app (_variables-semillero.scss) */
:root {
  --purple: #7C59F0;  --purple-2: #9B82F0;  --purple-soft: #EAE9FD;
  --cyan: #32D0F3;
  --orange: #FB6404;  --orange-2: #FC7C23;
  --green: #00A88A;   --green-2: #2FCD9A;   --green-dark: #048565;
  --ink: #131220;     --slate: #74788D;     --mist: #F8F8F8;
  --footer: #2E3538;  --line: #dcdfe3;      --error: #DA3746;
  --gradient-header: linear-gradient(139deg, #32D0F3 22%, #7C59F0 59%);

  /* Mersad se carga desde https://fonts.cdnfonts.com/css/mersad */
  --display: "Mersad", "Outfit", system-ui, sans-serif;
  --body: "Noto Sans", system-ui, sans-serif;

  --radius-pill: 100px; --radius-card: 20px; --radius-input: 4px;
}

body { font-family: var(--body); color: var(--ink); background: #fff; font-size: 15px; }
h1, h2, h3, h4 { font-family: var(--display); }
h1 { font-size: 65px; line-height: 65px; font-weight: 900; }
h2 { font-size: 45px; line-height: 55px; font-weight: 900; }
h3 { font-size: 35px; line-height: 35px; font-weight: 700; }
h4 { font-size: 25px; line-height: 35px; }
p  { font-size: 18px; line-height: 30px; font-weight: 400; }

.btn { font: 700 16px/12px var(--display); padding: 16px 32px; border: 0;
       border-radius: var(--radius-pill); background: var(--purple); color: #fff;
       cursor: pointer; transition: background .5s ease; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--orange); }
.btn--black { background: var(--ink); }
.btn--lg { font-size: 20px; line-height: 20px; padding: 16px 56px; }

.card { border-radius: var(--radius-card); padding: 28px 26px 40px; }
.input { font: 500 14px var(--body); padding: 10px; border: 1px solid var(--line);
         border-radius: var(--radius-input); }
.input::placeholder { color: #adb5bd; font-size: 13px; }