/* Aula Contigo — tokens.
   Palette taken from the team's existing site («Experiencias que transforman», Canva):
   cream paper, deep green ink, sage leaves, coral, mustard, lilac, sky and aqua.
   Exception to the SOP: pastel circles behind icons are kept on purpose, because they
   are part of the client's own identity. */
:root {
  color-scheme: light;

  --cream: #f8f3e6;
  --cream-2: #f1e8d2;
  --paper: #fffcf5;
  --ink: #1f4636;
  --ink-2: #2f5d48;
  --ink-mut: #5b6f63;
  --sage: #a9c59b;
  --sage-soft: #e3eedb;
  --leaf: #5c8f5a;
  --leaf-dark: #3d6b45;
  --coral: #ee8a6c;
  --coral-ink: #b4502f;
  --coral-soft: #fbe1d6;
  --pink: #f4a7a1;
  --mustard: #f2b33d;
  --mustard-soft: #fcefcf;
  --orange: #ef9a3b;
  --lilac: #d8c5ee;
  --lilac-ink: #6a4f93;
  --sky: #a3caef;
  --sky-soft: #e2effb;
  --aqua: #b6dfdf;
  --aqua-soft: #e3f3f2;

  --line: rgb(31 70 54 / .12);
  --line-strong: rgb(31 70 54 / .22);

  --shadow-1:
    0 1px 1px rgb(61 82 50 / .05), 0 2px 3px rgb(61 82 50 / .05), 0 6px 10px rgb(61 82 50 / .04);
  --shadow-2:
    0 1px 1px rgb(61 82 50 / .05), 0 3px 4px rgb(61 82 50 / .05),
    0 8px 12px rgb(61 82 50 / .05), 0 18px 32px rgb(61 82 50 / .06);
  --shadow-3:
    0 2px 2px rgb(61 82 50 / .05), 0 8px 12px rgb(61 82 50 / .05),
    0 24px 40px rgb(61 82 50 / .07), 0 48px 80px rgb(61 82 50 / .07);

  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --script: "Caveat Brush", "Segoe Print", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -0.012em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--leaf-dark); text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.rainbow > span:nth-child(7n+1) { color: var(--mustard); }
.rainbow > span:nth-child(7n+2) { color: var(--orange); }
.rainbow > span:nth-child(7n+3) { color: var(--coral); }
.rainbow > span:nth-child(7n+4) { color: #6fb3c8; }
.rainbow > span:nth-child(7n+5) { color: var(--pink); }
.rainbow > span:nth-child(7n+6) { color: var(--leaf); }
.rainbow > span:nth-child(7n+7) { color: #a58bd0; }

.overline {
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--coral-ink);
}

.icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon .soft { opacity: .4; }

.btn {
  --bg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 22px 12px; border-radius: 999px;
  border: 2px solid transparent; background: var(--bg); color: var(--cream);
  font-weight: 800; text-decoration: none; cursor: pointer; line-height: 1.2;
  box-shadow: var(--shadow-1);
  transition: background-color 140ms var(--ease-snap), transform 90ms var(--ease-snap), box-shadow 180ms var(--ease-out);
}
.btn:hover { --bg: #173a2c; box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(.5px) scale(.985); }
.btn:disabled { opacity: .5; cursor: default; }
.btn .icon { transition: transform 160ms var(--ease-snap); }
.btn:hover .icon--go { transform: translateX(3px); }
.btn--sun { --bg: var(--mustard); color: var(--ink); }
.btn--sun:hover { --bg: #eaa520; }
.btn--line { --bg: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn--line:hover { --bg: rgb(255 252 245 / .7); box-shadow: none; }
.btn--soft { --bg: var(--sage-soft); color: var(--ink); box-shadow: none; }
.btn--soft:hover { --bg: #d4e5c8; }
.btn--sm { min-height: 40px; padding: 7px 16px 8px; font-size: .9375rem; }

.notice {
  background: var(--ink); color: var(--cream); text-align: center;
  font-size: .8125rem; padding: 7px 16px 8px; line-height: 1.4;
}
.notice b { color: var(--mustard); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Characters: closed mouth by default; .is-talking animates it */
.person .mouth-open { opacity: 0; }
.person--img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.person--face { object-fit: cover; object-position: center; }