@font-face { font-family: "Space Grotesk"; src: url("/sistema/fuentes/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/sistema/fuentes/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url("/sistema/fuentes/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("/sistema/fuentes/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root { color-scheme: light; --lima: #D1FE17; --magenta: #FF1F7A; --tinta: #101114; --suave: #65686e; --fondo: #f7f7f4; --superficie: #fff; --linea: #dcded8; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; min-height: 100svh; margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.45 Inter, system-ui, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.saltar { position: fixed; top: -5rem; left: 1rem; z-index: 2; min-height: 44px; padding: .7rem 1rem; border-radius: 999px; background: var(--tinta); color: white; font-weight: 600; text-decoration: none; }
.saltar:focus { top: calc(.75rem + env(safe-area-inset-top)); }
main { width: min(100% - 2rem, 38rem); min-height: 100svh; margin: auto; padding: max(2rem, calc(2rem + env(safe-area-inset-top))) 0 calc(2rem + env(safe-area-inset-bottom)); display: grid; align-content: center; gap: clamp(2rem, 5vh, 4rem); }
.presentacion { display: grid; justify-items: center; text-align: center; }
.icono { width: 72px; height: 72px; padding: 14px; border-radius: 23px; background: var(--tinta); box-shadow: 0 18px 42px rgb(16 17 20 / .17); }
.marca { margin: 1rem 0 .35rem; font: 700 clamp(1.35rem, 4vw, 1.7rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
h1 { max-width: 14ch; margin: 0; font: 700 clamp(2rem, 8vw, 3.45rem)/.98 "Space Grotesk", sans-serif; letter-spacing: -.065em; text-wrap: balance; }
.descripcion { max-width: 34ch; margin: 1rem 0 0; color: var(--suave); text-wrap: pretty; }
.enlaces { display: grid; gap: .75rem; }
.enlace { position: relative; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 1rem 1.25rem; border: 1px solid var(--linea); border-radius: 1rem; background: var(--superficie); box-shadow: 0 2px 0 rgb(16 17 20 / .03); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.enlace::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 1rem 0 0 1rem; background: var(--lima); }
.enlace--principal { border-color: var(--tinta); background: var(--tinta); color: white; }
.enlace--principal::before { background: var(--lima); }
.enlace span { display: grid; gap: .16rem; min-width: 0; }
.enlace b { font: 700 1.05rem/1.2 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.enlace small { color: var(--suave); font-size: .875rem; line-height: 1.3; }
.enlace--principal small { color: rgb(255 255 255 / .72); }
.enlace i { flex: 0 0 auto; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: color-mix(in srgb, var(--lima) 20%, transparent); color: inherit; font-style: normal; }
footer { color: var(--suave); font-size: .78rem; text-align: center; }
@media (hover: hover) { .enlace:hover { transform: translateY(-2px); border-color: var(--tinta); box-shadow: 0 12px 24px rgb(16 17 20 / .1); } }
@media (prefers-reduced-motion: reduce) { .enlace { transition: none; } }

/* 6-oct: el logo nuevo ya trae su cuadro y su fondo */
.icono { padding: 0; background: none; box-shadow: none; }