/* Paleta y tipografía según F2/MARCA/manual.md: negro puro, oro, plata y blanco. */
:root {
  --black: #000000;
  --gold: #be7d25;
  --gold-shadow: #965008;
  --gold-highlight: #e8a53e;
  --silver: #9f9da2;
  --white: #ffffff;
  --line: rgb(159 157 162 / 0.24);
  --line-strong: rgb(159 157 162 / 0.55);
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --radius: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  color: var(--white);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
p { margin: 0; }

.page {
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.medal img { width: 148px; height: 148px; }
.title {
  margin: 18px 0 0;
  font: 700 24px/1.1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-indent: 0.12em; /* compensa el tracking para centrar ópticamente */
}
.lede {
  margin-top: 10px;
  max-width: 32ch;
  color: var(--silver);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: balance;
}
.lede strong { font-weight: 700; color: var(--white); }

/* Accesos */
.links { display: flex; flex-direction: column; gap: 12px; }
.link {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: 14px;
  min-height: 80px;
  padding: 14px 16px 14px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 220ms ease, transform 220ms var(--ease-out);
}
.link__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(190 125 37 / 0.55);
  border-radius: 50%;
  color: var(--gold);
  transition: color 220ms ease, border-color 220ms ease;
}
.link__text { display: flex; flex-direction: column; min-width: 0; }
.link__kicker {
  font: 500 12px/1.2 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.link__label { margin-top: 4px; font: 700 17px/1.25 var(--display); letter-spacing: -0.005em; color: var(--gold); transition: color 220ms ease; }
.link__meta { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--silver); }
.link__arrow { color: var(--gold); transition: transform 220ms var(--ease-out), color 220ms ease; }

/* Marco metálico en oro, como el anillo del medallón. Siempre visible: en el celular no hay hover. */
.link::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-shadow), var(--gold-highlight) 42%, var(--gold) 64%, var(--gold-shadow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Contacto: el enlace se estira sobre toda la tarjeta y el mail queda por encima para copiarse. */
.link__stretch { text-decoration: none; }
.link__stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.link__stretch:focus-visible { outline: none; }
.link--contact:has(.link__stretch:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.mail-copy {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  min-height: 44px;
  margin: -9px 0 -12px;
  padding: 12px 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgb(159 157 162 / 0.6);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  cursor: copy;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.mail-copy.is-done { color: var(--gold); text-decoration-color: var(--gold); }

.status {
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--silver);
}

/* Interacción: con mouse, la tarjeta sube y el oro toma el brillo del highlight; al tocar, se hunde. */
@media (hover: hover) and (pointer: fine) {
  .link:hover { transform: translateY(-2px); }
  .link:hover .link__icon { color: var(--gold-highlight); border-color: var(--gold); }
  .link:hover .link__label { color: var(--gold-highlight); }
  .link:hover .link__arrow { transform: translate(3px, -3px); color: var(--gold-highlight); }
  .mail-copy:hover { color: var(--white); text-decoration-color: var(--gold); }
}
/* Tocar el mail copia: no se marca como si se abriera la tarjeta. */
.link:not(:has(.mail-copy:active)):active { transform: scale(0.985); transition-duration: 90ms; }
.link:not(:has(.mail-copy:active)):active .link__label { color: var(--gold-highlight); }
.link:focus-visible, .mail-copy:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  z-index: 1;
}

/* Pie */
.foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.candles { width: 200px; height: auto; color: var(--white); opacity: 0.42; margin-bottom: 6px; }
.candles .hollow { fill: var(--black); }
.tagline {
  font: 700 12px/1.5 var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gold);
}
.small { font-size: 12px; color: var(--silver); }

@media (max-width: 359px) {
  .link__meta { font-size: 13px; }
}

@media (min-width: 640px) {
  .page { padding-top: max(64px, env(safe-area-inset-top)); gap: 44px; }
  .medal img { width: 196px; height: 196px; }
  .title { margin-top: 22px; font-size: 30px; }
  .lede { font-size: 16px; }
}

/* Entrada: una sola secuencia corta, del medallón a los accesos. */
@media (prefers-reduced-motion: no-preference) {
  .medal, .title, .lede, .links > *, .foot { animation: rise 640ms var(--ease-out) both; }
  .medal { animation-name: settle; animation-duration: 900ms; }
  .title { animation-delay: 120ms; }
  .lede { animation-delay: 180ms; }
  .links > :nth-child(1) { animation-delay: 260ms; }
  .links > :nth-child(2) { animation-delay: 320ms; }
  .links > :nth-child(3) { animation-delay: 380ms; }
  .links > :nth-child(4), .foot { animation-delay: 460ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes settle { from { opacity: 0; transform: scale(0.94); } }
.nowrap { white-space: nowrap; }