/* Landing de chekki. Tokens del sistema de diseño "chekki" (design/sistema/project/tokens.json):
   papel y tinta, un solo verde, líneas finas, etiquetas mono. Movimiento: 120 / 200 / 320 ms. */
@font-face { font-family: 'Geist'; src: url('/fuentes/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fuentes/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #F7F8F5; --surface-1: #FFFFFF; --surface-2: #EEF0EB;
  --strong: #101312; --muted: #5A615D; --faint: #686F6B;
  --border: rgba(16, 19, 18, 0.10); --control: #8A918D;
  --accent: #0B7A5B; --on-accent: #FFFFFF; --accent-tint: rgba(11, 122, 91, 0.10);
  --expense: #B93D0B; --expense-tint: rgba(185, 61, 11, 0.08);
  --tinta: #101312; --tinta-texto: #F2F4F1; --tinta-muted: #A3ABA6;
  --sombra: 0 12px 32px rgba(0, 0, 0, 0.18);
  --sans: 'Geist', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --entrada: cubic-bezier(.16, 1, .3, 1);
  --toque: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0D0C; --surface-1: #151917; --surface-2: #1D2220;
    --strong: #F2F4F1; --muted: #A3ABA6; --faint: #838B86;
    --border: #2A302D; --control: #5C6661;
    --accent: #3DDC97; --on-accent: #04130D; --accent-tint: rgba(61, 220, 151, 0.12);
    --expense: #FF8A5C; --expense-tint: rgba(255, 138, 92, 0.12);
    --tinta: #151917; --tinta-texto: #F2F4F1; --tinta-muted: #A3ABA6;
    --sombra: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--muted); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--strong); color: var(--bg); padding: 8px 16px; border-radius: 999px; z-index: 10; }
.saltar:focus { left: 16px; }

/* Tipografía del sistema */
.etiqueta { font: 500 12px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.etiqueta--acento { color: var(--accent); }
.titular { margin: 0; color: var(--strong); font-weight: 600; letter-spacing: -0.04em; font-size: clamp(44px, 7vw, 80px); line-height: 1; text-wrap: balance; }
.titular__linea { display: block; }
.titular__remate { display: block; color: var(--muted); }
.titular--seccion { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.titular--seccion .titular__remate { margin-top: 4px; }
.nota { font-size: 14px; line-height: 20px; color: var(--muted); margin: 12px 0 0; }
.nota--centro { text-align: center; }
.logo { color: var(--strong); font-weight: 600; letter-spacing: -0.05em; font-size: 24px; text-decoration: none; }
.logo b { color: var(--accent); font-weight: 600; }
.logo--chico { font-size: 16px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px dashed var(--control); }
.cabecera__fila { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.cabecera__nav { display: flex; gap: 24px; margin-left: auto; }
.cabecera__nav a { font: 500 12px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-decoration: none; padding-block: 16px; transition: color 120ms var(--toque); }
.cabecera__nav a:hover { color: var(--strong); }
.pildora-proximo { font: 500 12px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
@media (max-width: 760px) { .cabecera__nav { display: none; } .pildora-proximo { margin-left: auto; } }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding-block: 64px 80px; }
.hero__texto .etiqueta { margin: 0 0 20px; }
.hero__sub { font-size: 18px; line-height: 28px; max-width: 34ch; margin: 24px 0 0; color: var(--muted); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; }
.hero__acciones--centro { justify-content: center; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-block: 40px 56px; } }

/* "Próximamente en Google Play": aspecto de botón de tienda, desactivado (patrón ComingSoonButton de Pluver) */
.tienda { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px 8px 18px; border-radius: 14px; border: 1px solid var(--strong); background: var(--strong); color: var(--bg); cursor: not-allowed; opacity: 1; }
.tienda__icono { width: 22px; height: 22px; fill: currentColor; }
.tienda__texto { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.tienda__pre { font: 500 12px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.tienda__marca { font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.boton-contorno { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; text-decoration: none; transition: background 120ms var(--toque), transform 120ms var(--toque); }
.boton-contorno:hover { background: var(--accent-tint); }
.boton-contorno:active { transform: scale(0.98); }

/* Teléfono y demo */
.hero__demo { display: flex; flex-direction: column; align-items: center; }
.telefono { margin: 0; width: min(100%, 360px); aspect-ratio: 360 / 740; border-radius: 48px; padding: 10px; background: var(--strong); box-shadow: var(--sombra); }
.telefono__pantalla { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bg); }
.app { padding: 22px 18px; }
.app__cabecera { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dashed var(--control); }
.app__rotulo { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.cifra { margin: 0; color: var(--strong); font-weight: 600; letter-spacing: -0.04em; font-size: 52px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cifra__simbolo, .cifra__dec { font-size: 0.39em; font-weight: 500; color: var(--faint); vertical-align: top; line-height: 1.6; }
.app__dia { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.app__dia b { color: var(--strong); font-weight: 500; font-variant-numeric: tabular-nums; }
.regla { display: flex; justify-content: space-between; align-items: flex-end; height: 16px; margin-top: 10px; }
.regla i { display: block; width: 2px; height: 10px; border-radius: 1px; background: var(--control); opacity: 0.6; transition: height 200ms var(--entrada), background 200ms var(--entrada); }
.regla i.pasado { background: var(--strong); opacity: 1; }
.regla i.hoy { background: var(--accent); opacity: 1; height: 16px; }
.regla--grande { height: 28px; margin-top: 18px; }
.regla--grande i { height: 18px; width: 3px; }
.regla--grande i.hoy { height: 28px; }
.app__lista { list-style: none; margin: 14px 0 0; padding: 0; }
.renglon { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.renglon > span:first-child { display: flex; flex-direction: column; }
.renglon__nombre { color: var(--strong); font-size: 16px; }
.renglon--nuevo { animation: entra 320ms var(--entrada); }
.importe { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--strong); white-space: nowrap; }
.importe--gasto { color: var(--expense); }

.hoja { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface-1); border-radius: 24px 24px 0 0; box-shadow: var(--sombra); padding: 16px 16px 18px; transition: transform 320ms var(--entrada), opacity 200ms var(--entrada); }
.hoja.saliendo { transform: translateY(105%); opacity: 0; }
.hoja__cabecera { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed var(--control); }
.hoja__tipo { display: flex; gap: 12px; }
.etiqueta--activa { color: var(--strong); box-shadow: inset 0 -2px var(--accent); padding-bottom: 2px; }
.hoja__monto { margin: 10px 0 0; color: var(--strong); font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hoja__simbolo { font-size: 0.5em; color: var(--faint); font-weight: 500; vertical-align: top; line-height: 1.6; }
.hoja__monto.late { animation: late 200ms var(--entrada); }
.hoja__pista { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); min-height: 20px; }
.hoja__chips { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.hoja__cuenta { margin-left: auto; border: 1px solid var(--control); border-radius: 999px; padding: 6px 10px; }
.chip { font: 500 12px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--control); border-radius: 999px; padding: 0 12px; min-height: 36px; cursor: pointer; transition: background 120ms var(--toque), color 120ms var(--toque), border-color 120ms var(--toque), transform 120ms var(--toque); }
.chip:active { transform: scale(0.98); }
.chip--activo { color: var(--strong); background: var(--accent-tint); border-color: var(--accent); }
.periodos .chip { min-height: 48px; padding: 0 16px; }
.teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 10px; border-radius: 10px; overflow: hidden; }
.teclado button { background: var(--surface-1); border: 0; min-height: 44px; font-size: 20px; color: var(--strong); cursor: pointer; transition: background 120ms var(--toque); font-variant-numeric: tabular-nums; }
.teclado button:active, .teclado button.pulsada { background: var(--surface-2); }
.guardar { width: 100%; min-height: 48px; margin-top: 10px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; transition: opacity 200ms var(--entrada), transform 120ms var(--toque); }
.guardar:disabled { opacity: 0.4; cursor: default; }
.guardar:not(:disabled):active { transform: scale(0.98); }

.impreso { position: absolute; left: 12px; right: 12px; bottom: 18px; background: var(--surface-1); border-radius: 16px 16px 4px 4px; padding: 14px 14px 18px; box-shadow: var(--sombra); animation: entra 320ms var(--entrada); }
.impreso::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 10px; background: linear-gradient(-45deg, transparent 6px, var(--surface-1) 0) 0 0 / 12px 10px repeat-x, linear-gradient(45deg, transparent 6px, var(--surface-1) 0) 0 0 / 12px 10px repeat-x; }
.impreso[hidden] { display: none; }
.impreso__renglon { display: flex; align-items: center; gap: 10px; }
.impreso__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--strong); }
.deshacer { margin-top: 10px; background: none; border: 0; color: var(--accent); font-weight: 600; min-height: 44px; padding: 0; cursor: pointer; }

/* Doble palomita del logotipo, dibujable */
.palomita-doble { width: 36px; height: 36px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.palomita-doble path { stroke-width: 5; }
.palomita-doble__atras { stroke: var(--strong); }
.palomita-doble__hueco { stroke: var(--surface-1); stroke-width: 10 !important; }
.palomita-doble__frente { stroke: var(--accent); }
.palomita-doble path { stroke-dasharray: 46; stroke-dashoffset: 0; }
.dibuja .palomita-doble__atras { animation: traza 360ms var(--entrada) 120ms backwards; }
.dibuja .palomita-doble__hueco, .dibuja .palomita-doble__frente { animation: traza 360ms var(--entrada) backwards; }
.palomita-doble--grande { width: 72px; height: 72px; }
.palomita-doble--grande .palomita-doble__hueco, .palomita-doble--marca .palomita-doble__hueco { stroke: var(--bg); }
.palomita-doble--marca { width: 64px; height: 64px; margin: 0 auto 20px; }

/* Secciones */
.seccion { padding-block: 96px; }
.seccion > h2, .seccion .titular--seccion { margin-bottom: 24px; }
.seccion p { max-width: 60ch; }
@media (max-width: 700px) { .seccion { padding-block: 64px; } }

.problema { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; border-top: 1px dashed var(--control); }
.problema p { font-size: 18px; line-height: 28px; }
@media (max-width: 900px) { .problema { grid-template-columns: 1fr; } }
.ticket { position: relative; background: var(--surface-1); padding: 24px 24px 28px; font: 500 14px/20px var(--mono); color: var(--strong); transform: rotate(-1.2deg); box-shadow: var(--sombra); }
.ticket::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: linear-gradient(135deg, transparent 6px, var(--surface-1) 0) 0 0 / 12px 10px repeat-x, linear-gradient(-135deg, transparent 6px, var(--surface-1) 0) 0 0 / 12px 10px repeat-x; }
.ticket__cabeza { padding-bottom: 12px; border-bottom: 1px dashed var(--control); margin-bottom: 8px; }
.ticket__renglones { list-style: none; margin: 0; padding: 0; }
.ticket__renglones li { display: flex; align-items: baseline; gap: 8px; padding: 8px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ticket__puntos { flex: 1; border-bottom: 2px dotted var(--control); opacity: 0.6; transform: translateY(-4px); }
.ticket__perdido { color: var(--expense); background: var(--expense-tint); }
.ticket__perdido .ticket__puntos { border-color: var(--expense); }
.js .ticket.visible .ticket__perdido { animation: parpadea 1.6s var(--toque) 600ms 2 both; }
.ticket__total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--control); text-transform: uppercase; letter-spacing: 0.04em; }

.pasos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: paso; }
.paso { counter-increment: paso; border-top: 1px solid var(--control); padding-top: 20px; }
.paso::before { content: '0' counter(paso); font: 500 12px/16px var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.paso h3 { margin: 16px 0 8px; color: var(--strong); font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.paso p { margin: 0; }
.paso__ilustracion { height: 120px; margin-top: 16px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); display: grid; place-items: center; position: relative; overflow: hidden; }
.paso__ilustracion--boton::before { content: ''; width: 72px; height: 100px; border-radius: 14px; border: 2px solid var(--strong); }
.lateral { position: absolute; width: 5px; height: 26px; border-radius: 3px; background: var(--strong); left: calc(50% + 37px); top: 34px; animation: aprieta 2.4s var(--toque) infinite; }
.lateral__onda { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); left: calc(50% + 32px); top: 39px; opacity: 0; animation: onda 2.4s var(--entrada) infinite; }
.mini-monto { color: var(--strong); font-size: 48px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mini-monto__s { font-size: 0.45em; color: var(--faint); vertical-align: top; line-height: 1.8; }
@media (max-width: 800px) { .pasos { grid-template-columns: 1fr; } }

.escribir { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 24px; border: 1px dashed var(--control); border-radius: 16px; }
.escribir__pregunta { margin: 0; color: var(--strong); font-weight: 500; }
.escribir__campo { margin: 0; min-height: 48px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 10px; background: var(--surface-2); color: var(--strong); font-size: 18px; min-width: 220px; }
.cursor { width: 2px; height: 22px; background: var(--accent); margin-left: 2px; animation: cursor 1s steps(1) infinite; }
.escribir__resultado { margin: 0 0 0 auto; display: flex; gap: 16px; align-items: center; transition: opacity 200ms var(--entrada), transform 200ms var(--entrada); }
.escribir__resultado.oculto { opacity: 0; transform: translateY(4px); }

.seccion--tinta { background: var(--tinta); color: var(--tinta-muted); }
.seccion--tinta .titular { color: var(--tinta-texto); }
.seccion--tinta .titular__remate { color: var(--tinta-muted); }
.seccion--tinta .chip { color: var(--tinta-muted); border-color: #5C6661; }
.seccion--tinta .chip--activo { color: var(--tinta-texto); border-color: #3DDC97; background: rgba(61, 220, 151, 0.14); }
.queda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.queda p { font-size: 18px; line-height: 28px; }
.periodos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.queda__cifra { padding: 32px; border: 1px solid #2A302D; border-radius: 24px; }
.queda__cifra .app__rotulo { color: var(--tinta-muted); margin: 0; }
.queda__cifra .cifra--grande { font-size: clamp(56px, 8vw, 96px); line-height: 1.05; margin-top: 4px; color: var(--tinta-texto); }
.queda__cifra .cifra__simbolo, .queda__cifra .cifra__dec { color: #838B86; }
.queda__cifra .regla i { background: #5C6661; }
.queda__cifra .regla i.pasado { background: var(--tinta-texto); }
.queda__cifra .regla i.hoy { background: #3DDC97; }
.queda__rango { margin: 10px 0 0; color: #838B86; }
.queda__cifra .app__dia { color: var(--tinta-muted); font-size: 18px; margin-top: 16px; }
.queda__cifra .app__dia b { color: var(--tinta-texto); }
@media (max-width: 900px) { .queda { grid-template-columns: 1fr; } }

.racha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }
.racha p { font-size: 18px; line-height: 28px; }
.cadena { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 32px 0 0; max-width: 520px; }
.cadena li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cadena svg { width: 100%; max-width: 56px; fill: none; stroke: var(--strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cadena path { stroke-dasharray: 36; stroke-dashoffset: 0; }
.cadena span { font: 500 12px/16px var(--mono); letter-spacing: 0.08em; color: var(--faint); }
.cadena__perdonado svg { stroke: var(--accent); }
.cadena__perdonado path { stroke-dasharray: 3 5; }
.cadena__hoy svg { stroke: var(--accent); }
.cadena__hoy span { color: var(--accent); }
.js .cadena.visible li:not(.cadena__perdonado) path { animation: traza-cadena 420ms var(--entrada) backwards; }
.js .cadena.visible li:nth-child(1) path { animation-delay: 0ms; } .js .cadena.visible li:nth-child(2) path { animation-delay: 120ms; }
.js .cadena.visible li:nth-child(3) path { animation-delay: 240ms; } .js .cadena.visible li:nth-child(5) path { animation-delay: 480ms; }
.js .cadena.visible li:nth-child(6) path { animation-delay: 600ms; } .js .cadena.visible li:nth-child(7) path { animation-delay: 760ms; }
.racha__extras { display: grid; gap: 16px; }
.extra { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-1); }
.extra h3 { margin: 0 0 8px; color: var(--strong); font-size: 18px; }
.extra p { margin: 0; font-size: 16px; line-height: 24px; }
.extra__renglon { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px !important; padding-top: 12px; border-top: 1px dashed var(--control); color: var(--strong); }
@media (max-width: 900px) { .racha { grid-template-columns: 1fr; } }

.garantias { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.garantias li { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--border); }
.garantias svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.garantias h3 { margin: 16px 0 6px; color: var(--strong); font-size: 18px; line-height: 24px; }
.garantias p { margin: 0; }
@media (max-width: 900px) { .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .garantias { grid-template-columns: 1fr; } }

.acordeon { max-width: 760px; border-top: 1px solid var(--border); }
.acordeon details { border-bottom: 1px solid var(--border); }
.acordeon summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; color: var(--strong); font-size: 18px; font-weight: 500; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font: 400 24px/1 var(--sans); color: var(--accent); transition: transform 200ms var(--entrada); }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon details p { margin: 0 0 20px; }

.cierre { text-align: center; border-top: 1px dashed var(--control); }
.cierre .titular { margin-inline: auto; }
.cierre .nota { margin-inline: auto; }

.pie { border-top: 1px dashed var(--control); padding-block: 32px 40px; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pie__pluver { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.pie__pluver img { height: 24px; width: auto; }
.pie__texto { margin: 0; font-size: 14px; flex: 1; min-width: 220px; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 12px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.pie__nav a { color: var(--faint); text-decoration: none; padding-block: 14px; }
.pie__nav a:hover { color: var(--strong); }
.pie__correo { color: var(--faint); padding-block: 14px; text-transform: none; letter-spacing: 0.02em; }

/* Entrada al hacer scroll: solo con JS; sin JS todo se ve quieto */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--entrada), transform 600ms var(--entrada); }
.js .revelar.visible { opacity: 1; transform: none; }

@keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes late { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes traza { from { stroke-dashoffset: 46; } to { stroke-dashoffset: 0; } }
@keyframes traza-cadena { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
@keyframes parpadea { 0%, 100% { background: var(--expense-tint); } 50% { background: color-mix(in srgb, var(--expense) 22%, transparent); } }
@keyframes aprieta { 0%, 55%, 100% { transform: translateX(0); } 30%, 45% { transform: translateX(-3px); } }
@keyframes onda { 0%, 30% { opacity: 0; transform: scale(0.6); } 45% { opacity: 1; } 80%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes cursor { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .revelar { transform: none; }
  .lateral__onda, .cursor { display: none; }
}