/* ==========================================================
   STICKY SPANISH — site styles
   Edit the values in :root below to change colours everywhere.
   ========================================================== */

:root {
  /* ⚠️ Replace these with the exact hex values from your Figma */
  --yellow:  #FFC91F;
  --purple:  #9A62F0;
  --pink:    #FF2D78;
  --teal:    #17C7B4;
  --coral:   #FF6B4F;
  --ink:     #111111;
  --cream:   #FDF6E9;
  --white:   #FFFFFF;

  --radius:  20px;
  --border:  4px;
  --shadow:  6px 6px 0 var(--ink);
  --maxw:    720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--yellow);
  /* dot grid, same as the app */
  background-image: radial-gradient(rgba(0,0,0,.07) 2px, transparent 2px);
  background-size: 28px 28px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 80px; }

/* ---------- header ---------- */
.site-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 40px; }
.site-head img { width: 48px; height: 48px; border-radius: 12px; border: 3px solid var(--ink); }
.site-head a { font-weight: 900; font-size: 20px; text-decoration: none; color: var(--ink); }

/* ---------- type ---------- */
h1 { font-size: clamp(38px, 9vw, 64px); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; }
h2 { font-size: clamp(24px, 5vw, 34px); font-weight: 900; letter-spacing: -.01em; margin-bottom: 14px; }
h3 { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
p  { font-size: 17px; margin-bottom: 14px; }
.lead { font-size: clamp(18px, 3.4vw, 22px); font-weight: 600; margin-top: 18px; }
.pink { color: var(--pink); }
a { color: var(--ink); }

/* ---------- panels ---------- */
.panel {
  background: var(--white);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  margin: 34px 0;
}
.panel.teal   { background: var(--teal); }
.panel.purple { background: var(--purple); color: var(--white); }
.panel.purple a { color: var(--white); }

/* ---------- the demo (signature element) ---------- */
.demo p { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.demo .step { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.demo .num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--pink); color: var(--white);
  border: 3px solid var(--ink);
  display: grid; place-items: center; font-weight: 900; font-size: 15px;
}

/* ---------- card wall ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 34px 0; }
.cards img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: var(--border) solid var(--ink); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
@media (max-width: 520px) { .cards { grid-template-columns: repeat(2, 1fr); } }

/* ---------- button ---------- */
.btn {
  display: inline-block; background: var(--pink); color: var(--white);
  font-weight: 900; font-size: 18px; text-decoration: none;
  padding: 15px 30px; border: var(--border) solid var(--ink);
  border-radius: 999px; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }

/* ---------- legal pages ---------- */
.legal { background: var(--white); }
.legal h2 { margin-top: 30px; }
.legal ul { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 8px; font-size: 17px; }
.updated { font-size: 15px; opacity: .65; }

/* ---------- footer ---------- */
footer { border-top: 3px solid var(--ink); margin-top: 50px; padding-top: 20px; font-size: 15px; font-weight: 600; }
footer a { margin-right: 18px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }