/* Forero Pérez — calm, sober, chill */
:root{
  --ink:#14161E; --ink2:#1B1E29; --line:#2C3140;
  --fg:#EDE8DA; --ivory:#EDE8DA; --muted:#8A8F9E; --muted2:#5E6473; --gold:#C7A156;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(125% 90% at 50% 0%, #1C1F2B 0%, #14161E 56%);
  color:var(--fg); font-family:Inter, system-ui, -apple-system, sans-serif;
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:48px 22px; position:relative; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
.card{width:100%; max-width:430px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1}
.seal{width:62px; height:62px; margin-bottom:26px}
.wordmark{font-family:Montserrat, sans-serif; font-weight:500; letter-spacing:.24em; text-transform:uppercase; font-size:clamp(21px,6.5vw,29px); line-height:1; white-space:nowrap}
.wordmark .f{color:var(--ivory)}
.wordmark .g{background:linear-gradient(115deg,#E8CB7E,#C7A156 45%,#A9772F); -webkit-background-clip:text; background-clip:text; color:transparent}
.divider{width:46px; height:2px; border-radius:2px; background:linear-gradient(90deg,#E8CB7E,#A9772F); margin-top:20px}
.tagline{margin-top:18px; color:var(--muted); font-size:14px}
.links{width:100%; margin-top:34px; display:flex; flex-direction:column; gap:12px}
.group-label{font-family:Montserrat,sans-serif; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted2); margin:14px 2px 2px; text-align:left}
.btn{display:flex; align-items:center; gap:14px; width:100%; padding:15px 18px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.015); color:var(--fg); text-decoration:none; font-size:15px;
  transition:border-color .25s ease, background .25s ease, transform .12s ease}
.btn:hover{border-color:var(--gold); background:rgba(199,161,86,.06)}
.btn:active{transform:scale(.99)}
.btn .ic{width:20px; height:20px; flex:0 0 20px; color:var(--gold)}
.btn .lb{flex:1; text-align:left}
.btn .ar{color:var(--muted2); font-size:14px}
.kids{width:100%; margin-top:26px; padding:24px 22px; border:1px dashed var(--line); border-radius:16px; background:rgba(255,255,255,.012)}
.kids-motifs{display:flex; gap:16px; justify-content:center; margin-bottom:12px}
.km{width:34px; height:34px; opacity:.92}
.kids-name{font-family:Montserrat,sans-serif; font-weight:500; letter-spacing:.12em; text-transform:uppercase; font-size:13px}
.kids-msg{margin-top:6px; color:var(--muted); font-size:13px; font-style:italic}
.foot{margin-top:36px; color:var(--muted2); font-size:11px; letter-spacing:.22em; text-transform:uppercase}
.river{position:fixed; left:0; right:0; bottom:0; width:100%; height:84px; opacity:.6; pointer-events:none; z-index:0}
.rflow{opacity:.5}
@media (prefers-reduced-motion: no-preference){
  .seal{animation:fade 1s ease both}
  .wordmark{animation:rise .8s ease both .1s}
  .divider{animation:rise .8s ease both .25s}
  .tagline{animation:rise .8s ease both .35s}
  .links{animation:rise .8s ease both .45s}
  .kids{animation:rise .8s ease both .55s}
  .rflow{stroke-dasharray:2 22; animation:flow 3.2s linear infinite}
}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-48}}