/* ── tipografía ─────────────────────────────── */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ── tokens (valores del .fig) ──────────────── */
:root {
  --bg: #f9faf0;
  --ink: #3b3b3c;
  --w: 400px;       /* ancho del contenedor */
  --gap: 100px;     /* espacio entre header · main · footer */
  color-scheme: light;
}

/* ── base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

body {
  min-height: 100svh;
  padding: var(--gap) 16px;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.5 "Geist", system-ui, sans-serif;
  letter-spacing: .03em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1 { font: inherit; }
b  { font-weight: 700; }

a {
  color: inherit;
  text-decoration: underline dotted 1px;
  text-underline-offset: .235em;
}
a:hover { text-decoration-style: solid; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ── layout ─────────────────────────────────── */
.view  { display: flex; flex-direction: column; gap: var(--gap); }
.stack { display: flex; flex-direction: column; align-items: center; gap: 10px;
         width: 100%; max-width: var(--w); margin-inline: auto; }

/* foto: retícula de puntos del .fig (Ø .93 · paso 2.27) — se cambia por <img> */
.pic {
  width: 87px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--ink) .45px, transparent .6px) 0 0 / 2.27px 2.27px;
  opacity: .35;
}

.links { display: flex; flex-direction: column; align-items: center; padding-block: 50px; }

.embed {
  width: 100%; min-height: 34px; padding: 6px 9px;
  border: 1px solid var(--ink); border-radius: 6px;
}
iframe.embed { display: block; min-height: 400px; padding: 0; }

/* ── botones ────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 3px 9px;
  border: 1px dashed var(--ink);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  rotate: -1deg;
  -webkit-tap-highlight-color: transparent;
}

/* fricción: 3 estados, uno visible a la vez */
.more > span { display: none; }
.more[data-step="1"] > :nth-child(1),
.more[data-step="2"] > :nth-child(2),
.more[data-step="3"] > :nth-child(3) { display: inline-block; rotate: 1deg; }
.more:not([data-step="1"]) { rotate: 3deg; font-size: 14px; font-weight: 700; }

/* ── vistas: #rrss se muestra con la URL /#rrss ── */
#rrss { display: none; }
#rrss:target { display: flex; justify-content: center; min-height: calc(100svh - 2 * var(--gap)); gap: 0; }
body:has(#rrss:target) #inicio { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: rotate .2s ease-out; }
}