/* Flinched · landing. Los mismos colores y letras que la app: negro neutro con grano, títulos anchos,
   el oro solo para lo importante y capturas de verdad. */
@font-face { font-family: 'Inter'; src: url(fuentes/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(fuentes/unbounded-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fuentes/jetbrains-mono.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fondo: #0b0b0c;
  --sup: #141415;
  --sup-2: #1c1c1e;
  --borde: #29292c;
  --borde-2: #3a3a3e;
  --texto: #f2f2f3;
  --suave: #a0a0a6;
  --tenue: #85858b;
  --oro: #dcb85f;
  --oro-osc: #1a1405;
  --bien: #34c759;
  --mal: #ef4444;
  --ancho: 1240px;
  --lado: clamp(20px, 5vw, 56px);
  --display: 'Unbounded', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.6 'Inter', -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22320%22 viewBox=%220 0 320 320%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-50%25%22 y=%22-50%25%22 width=%22200%25%22 height=%22200%25%22%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3C/filter%3E%3Cg id=%22m%22 stroke=%22rgb%28205%2C205%2C205%29%22 stroke-width=%221%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%22-4.5%2C-8.9 43.3%2C11.5 42.0%2C37.4%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22-4.5%2C-8.9 42.0%2C37.4 3.9%2C29.1%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%223.9%2C29.1 42.0%2C37.4 52.2%2C68.4%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%223.9%2C29.1 52.2%2C68.4 0.9%2C76.6%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%220.9%2C76.6 52.2%2C68.4 49.2%2C114.6%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%220.9%2C76.6 49.2%2C114.6 -11.3%2C120.2%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22-11.3%2C120.2 49.2%2C114.6 30.9%2C150.2%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22-11.3%2C120.2 30.9%2C150.2 -11.8%2C158.3%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22-11.8%2C158.3 30.9%2C150.2 35.1%2C208.1%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22-11.8%2C158.3 35.1%2C208.1 -11.0%2C189.5%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22-11.0%2C189.5 35.1%2C208.1 31.8%2C242.1%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22-11.0%2C189.5 31.8%2C242.1 -1.9%2C248.4%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22-1.9%2C248.4 31.8%2C242.1 43.6%2C276.7%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22-1.9%2C248.4 43.6%2C276.7 -9.6%2C272.9%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22-9.6%2C272.9 43.6%2C276.7 -4.5%2C311.1%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2243.6%2C276.7 43.3%2C331.5 -4.5%2C311.1%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2243.3%2C11.5 81.2%2C-11.2 42.0%2C37.4%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2281.2%2C-11.2 68.7%2C32.5 42.0%2C37.4%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2242.0%2C37.4 68.7%2C32.5 84.6%2C78.1%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2242.0%2C37.4 84.6%2C78.1 52.2%2C68.4%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2252.2%2C68.4 84.6%2C78.1 75.2%2C122.2%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2252.2%2C68.4 75.2%2C122.2 49.2%2C114.6%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%2249.2%2C114.6 75.2%2C122.2 78.8%2C154.9%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%2249.2%2C114.6 78.8%2C154.9 30.9%2C150.2%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2230.9%2C150.2 78.8%2C154.9 87.5%2C205.1%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2230.9%2C150.2 87.5%2C205.1 35.1%2C208.1%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2235.1%2C208.1 87.5%2C205.1 73.4%2C241.9%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2235.1%2C208.1 73.4%2C241.9 31.8%2C242.1%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2231.8%2C242.1 73.4%2C241.9 43.6%2C276.7%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%2273.4%2C241.9 80.6%2C289.6 43.6%2C276.7%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2243.6%2C276.7 80.6%2C289.6 43.3%2C331.5%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2280.6%2C289.6 81.2%2C308.8 43.3%2C331.5%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2281.2%2C-11.2 125.9%2C-5.4 132.3%2C30.2%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2281.2%2C-11.2 132.3%2C30.2 68.7%2C32.5%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%2268.7%2C32.5 132.3%2C30.2 117.9%2C86.6%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2268.7%2C32.5 117.9%2C86.6 84.6%2C78.1%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%2284.6%2C78.1 117.9%2C86.6 111.1%2C119.7%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2284.6%2C78.1 111.1%2C119.7 75.2%2C122.2%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2275.2%2C122.2 111.1%2C119.7 108.2%2C164.3%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%2275.2%2C122.2 108.2%2C164.3 78.8%2C154.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%2278.8%2C154.9 108.2%2C164.3 126.8%2C201.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%2278.8%2C154.9 126.8%2C201.9 87.5%2C205.1%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%2287.5%2C205.1 126.8%2C201.9 129.6%2C235.2%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%2287.5%2C205.1 129.6%2C235.2 73.4%2C241.9%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%2273.4%2C241.9 129.6%2C235.2 80.6%2C289.6%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22129.6%2C235.2 125.0%2C282.4 80.6%2C289.6%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%2280.6%2C289.6 125.0%2C282.4 125.9%2C314.6%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%2280.6%2C289.6 125.9%2C314.6 81.2%2C308.8%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22125.9%2C-5.4 162.0%2C-1.1 168.7%2C51.4%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22125.9%2C-5.4 168.7%2C51.4 132.3%2C30.2%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22132.3%2C30.2 168.7%2C51.4 117.9%2C86.6%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22168.7%2C51.4 159.3%2C84.2 117.9%2C86.6%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22117.9%2C86.6 159.3%2C84.2 111.1%2C119.7%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22159.3%2C84.2 148.8%2C125.2 111.1%2C119.7%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22111.1%2C119.7 148.8%2C125.2 163.8%2C172.6%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22111.1%2C119.7 163.8%2C172.6 108.2%2C164.3%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22108.2%2C164.3 163.8%2C172.6 126.8%2C201.9%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22163.8%2C172.6 168.2%2C194.5 126.8%2C201.9%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22126.8%2C201.9 168.2%2C194.5 157.1%2C244.3%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22126.8%2C201.9 157.1%2C244.3 129.6%2C235.2%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22129.6%2C235.2 157.1%2C244.3 125.0%2C282.4%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22157.1%2C244.3 147.8%2C279.0 125.0%2C282.4%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22125.0%2C282.4 147.8%2C279.0 125.9%2C314.6%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22147.8%2C279.0 162.0%2C318.9 125.9%2C314.6%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22162.0%2C-1.1 191.5%2C-9.8 168.7%2C51.4%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22191.5%2C-9.8 188.7%2C46.9 168.7%2C51.4%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22168.7%2C51.4 188.7%2C46.9 159.3%2C84.2%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22188.7%2C46.9 190.5%2C73.5 159.3%2C84.2%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22159.3%2C84.2 190.5%2C73.5 197.2%2C129.5%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22159.3%2C84.2 197.2%2C129.5 148.8%2C125.2%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22148.8%2C125.2 197.2%2C129.5 189.3%2C158.7%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22148.8%2C125.2 189.3%2C158.7 163.8%2C172.6%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22163.8%2C172.6 189.3%2C158.7 201.3%2C209.8%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22163.8%2C172.6 201.3%2C209.8 168.2%2C194.5%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22168.2%2C194.5 201.3%2C209.8 157.1%2C244.3%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22201.3%2C209.8 208.2%2C249.3 157.1%2C244.3%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22157.1%2C244.3 208.2%2C249.3 147.8%2C279.0%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22208.2%2C249.3 194.3%2C277.8 147.8%2C279.0%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22147.8%2C279.0 194.3%2C277.8 162.0%2C318.9%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22194.3%2C277.8 191.5%2C310.2 162.0%2C318.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22191.5%2C-9.8 236.4%2C9.8 251.7%2C31.1%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22191.5%2C-9.8 251.7%2C31.1 188.7%2C46.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22188.7%2C46.9 251.7%2C31.1 231.7%2C73.1%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22188.7%2C46.9 231.7%2C73.1 190.5%2C73.5%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22190.5%2C73.5 231.7%2C73.1 197.2%2C129.5%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22231.7%2C73.1 233.2%2C119.6 197.2%2C129.5%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22197.2%2C129.5 233.2%2C119.6 189.3%2C158.7%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22233.2%2C119.6 242.3%2C153.9 189.3%2C158.7%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22189.3%2C158.7 242.3%2C153.9 201.3%2C209.8%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22242.3%2C153.9 227.3%2C197.9 201.3%2C209.8%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22201.3%2C209.8 227.3%2C197.9 208.2%2C249.3%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22227.3%2C197.9 236.7%2C241.7 208.2%2C249.3%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22208.2%2C249.3 236.7%2C241.7 194.3%2C277.8%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22236.7%2C241.7 251.6%2C284.9 194.3%2C277.8%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22194.3%2C277.8 251.6%2C284.9 191.5%2C310.2%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22251.6%2C284.9 236.4%2C329.8 191.5%2C310.2%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22236.4%2C9.8 280.4%2C3.0 284.5%2C28.6%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22236.4%2C9.8 284.5%2C28.6 251.7%2C31.1%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22251.7%2C31.1 284.5%2C28.6 231.7%2C73.1%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22284.5%2C28.6 290.2%2C87.2 231.7%2C73.1%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22231.7%2C73.1 290.2%2C87.2 289.6%2C127.6%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22231.7%2C73.1 289.6%2C127.6 233.2%2C119.6%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22233.2%2C119.6 289.6%2C127.6 277.2%2C157.4%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22233.2%2C119.6 277.2%2C157.4 242.3%2C153.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22242.3%2C153.9 277.2%2C157.4 269.9%2C203.4%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22242.3%2C153.9 269.9%2C203.4 227.3%2C197.9%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22227.3%2C197.9 269.9%2C203.4 268.8%2C228.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22227.3%2C197.9 268.8%2C228.9 236.7%2C241.7%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22236.7%2C241.7 268.8%2C228.9 272.5%2C271.4%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22236.7%2C241.7 272.5%2C271.4 251.6%2C284.9%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22251.6%2C284.9 272.5%2C271.4 236.4%2C329.8%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22272.5%2C271.4 280.4%2C323.0 236.4%2C329.8%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22280.4%2C3.0 315.5%2C-8.9 284.5%2C28.6%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22315.5%2C-8.9 323.9%2C29.1 284.5%2C28.6%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22284.5%2C28.6 323.9%2C29.1 320.9%2C76.6%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22284.5%2C28.6 320.9%2C76.6 290.2%2C87.2%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22290.2%2C87.2 320.9%2C76.6 289.6%2C127.6%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22320.9%2C76.6 308.7%2C120.2 289.6%2C127.6%22 fill=%22rgb%28255%2C255%2C255%29%22/%3E%3Cpolygon points=%22289.6%2C127.6 308.7%2C120.2 277.2%2C157.4%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3Cpolygon points=%22308.7%2C120.2 308.2%2C158.3 277.2%2C157.4%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22277.2%2C157.4 308.2%2C158.3 269.9%2C203.4%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22308.2%2C158.3 309.0%2C189.5 269.9%2C203.4%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22269.9%2C203.4 309.0%2C189.5 318.1%2C248.4%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22269.9%2C203.4 318.1%2C248.4 268.8%2C228.9%22 fill=%22rgb%28231%2C231%2C231%29%22/%3E%3Cpolygon points=%22268.8%2C228.9 318.1%2C248.4 310.4%2C272.9%22 fill=%22rgb%28250%2C250%2C250%29%22/%3E%3Cpolygon points=%22268.8%2C228.9 310.4%2C272.9 272.5%2C271.4%22 fill=%22rgb%28224%2C224%2C224%29%22/%3E%3Cpolygon points=%22272.5%2C271.4 310.4%2C272.9 315.5%2C311.1%22 fill=%22rgb%28244%2C244%2C244%29%22/%3E%3Cpolygon points=%22272.5%2C271.4 315.5%2C311.1 280.4%2C323.0%22 fill=%22rgb%28238%2C238%2C238%29%22/%3E%3C/g%3E%3C/defs%3E%3Crect width=%22320%22 height=%22320%22 fill=%22%23fff%22/%3E%3Cg filter=%22url%28%23b%29%22%3E%3Cuse href=%22%23m%22 x=%22-320%22 y=%22-320%22/%3E%3Cuse href=%22%23m%22 x=%22-320%22 y=%220%22/%3E%3Cuse href=%22%23m%22 x=%22-320%22 y=%22320%22/%3E%3Cuse href=%22%23m%22 x=%220%22 y=%22-320%22/%3E%3Cuse href=%22%23m%22 x=%220%22 y=%220%22/%3E%3Cuse href=%22%23m%22 x=%220%22 y=%22320%22/%3E%3Cuse href=%22%23m%22 x=%22320%22 y=%22-320%22/%3E%3Cuse href=%22%23m%22 x=%22320%22 y=%220%22/%3E%3Cuse href=%22%23m%22 x=%22320%22 y=%22320%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 75% 55% at 50% -12%, rgba(220, 184, 95, .085), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 105%, rgba(220, 184, 95, .04), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px, auto, auto, 180px 180px;
  background-attachment: scroll, fixed, fixed, scroll;
  /* Los polígonos, desenfocados y en multiply: sombrean lo de debajo (negro, resplandor y grano) en vez de pintar encima. */
  background-blend-mode: multiply, normal, normal, normal;
  background-position: var(--fondo-x, 0px) var(--fondo-y, 0px), 0 0, 0 0, 0 0;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--oro); color: var(--oro-osc); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

main > section, .pie { max-width: var(--ancho); margin: 0 auto; padding-left: var(--lado); padding-right: var(--lado); }

/* ── Pequeñas piezas ── */
.etiqueta { margin: 0 0 14px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--oro); }
.nota-pequena { margin: 14px 0 0; font-size: 13px; color: var(--tenue); }
.titulo-seccion { display: flex; align-items: baseline; gap: 16px; margin: 0 0 40px; font: 900 clamp(26px, 3.4vw, 40px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.titulo-seccion .num { font: 500 13px var(--mono); color: var(--oro); letter-spacing: .1em; transform: translateY(-4px); }
.lista-fina { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-fina li { position: relative; padding-left: 20px; color: var(--suave); font-size: 15px; }
.lista-fina li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--oro); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 10px;
  font: 600 15px/1 'Inter', sans-serif; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.boton:active { transform: translateY(1px); }
.boton-oro { background: var(--oro); color: var(--oro-osc); }
.boton-oro:hover { background: #e8c873; }
.boton-claro { background: var(--texto); color: var(--fondo); }
.boton-claro:hover { background: #fff; }
.boton-linea { background: transparent; color: var(--texto); border-color: var(--borde-2); }
.boton-linea:hover { border-color: var(--suave); }
.boton[disabled] { opacity: .5; cursor: wait; }

/* ── Navegación ── */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 32px; padding: 14px var(--lado);
  background: rgba(11, 11, 12, .82); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.con-borde { border-bottom-color: var(--borde); }
.nav-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 16px var(--display); text-transform: uppercase; letter-spacing: .06em; }
.nav-marca img { border-radius: 8px; }
.nav-enlaces { display: flex; gap: 26px; margin-left: auto; }
.nav-enlaces a { text-decoration: none; color: var(--suave); font-size: 14px; }
.nav-enlaces a:hover { color: var(--texto); }
.nav-cta { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* ── Portada ── */
.portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-top: clamp(48px, 8vw, 96px); padding-bottom: 56px; }
.portada h1 { margin: 0; font: 900 clamp(30px, 3.9vw, 52px)/1.04 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.portada h1 em { font-style: normal; color: var(--oro); }
.entradilla { margin: 26px 0 0; font-size: 18px; line-height: 1.6; color: var(--suave); max-width: 46ch; }
.portada-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.portada-captura { position: relative; margin: 0 0 40px; margin-right: calc(-1 * var(--lado) - 40px); }
.portada-captura > img:first-child { border-radius: 14px 0 0 14px; border: 1px solid var(--borde); border-right: 0; box-shadow: 0 40px 90px rgba(0, 0, 0, .65); }

/* ── Cinta de lo que apunta ── */
.cinta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; padding-top: 28px !important; padding-bottom: 28px !important;
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); max-width: none !important; font: 500 13px var(--mono); color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.cinta span { padding: 0 18px; }
.cinta span + span { border-left: 1px solid var(--borde-2); }

/* ── Cómo se usa ── */
.pasos { padding-top: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 56px; }
.pasos .titulo-seccion { grid-column: 1 / -1; }
.pasos-lista { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 28px; }
.pasos-lista li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; }
.pasos-lista li::before { content: counter(paso, decimal-leading-zero); grid-row: span 2; font: 500 13px var(--mono); color: var(--oro); padding-top: 3px; }
.pasos-lista b { font-size: 18px; }
.pasos-lista p { margin: 6px 0 0; color: var(--suave); }
.pasos-captura { margin: 0; align-self: start; }
.pasos-captura img, .funcion-captura img { border-radius: 12px; border: 1px solid var(--borde); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
figcaption { margin-top: 12px; font: 500 12px var(--mono); color: var(--tenue); }

/* ── Funciones ── */
.funciones { padding-top: 130px; }
.funcion { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--borde); }
.funcion:first-of-type { border-top: 0; padding-top: 0; }
.funcion.al-reves { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.funcion.al-reves .funcion-texto { order: 2; }
.funcion h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.01em; }
.funcion-texto > p:not(.etiqueta) { margin: 14px 0 0; color: var(--suave); }
.funcion-captura { margin: 0; }
.funcion-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Con dos capturas: el texto arriba y las capturas a todo el ancho. */
.funcion:has(.funcion-dobles) { grid-template-columns: 1fr; gap: 36px; }
.funcion:has(.funcion-dobles) .funcion-texto { max-width: 720px; }
.funcion-dobles .funcion-captura:nth-child(2) { transform: translateY(32px); }

.extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.extra { padding: 28px 24px 28px 0; }
.extra + .extra { padding-left: 24px; border-left: 1px solid var(--borde); }
.extra b { display: block; font-size: 16px; }
.extra p { margin: 8px 0 0; color: var(--suave); font-size: 14px; }

/* ── Precio ── */
.precio { padding-top: 130px; }
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.plan { padding: 36px; display: flex; flex-direction: column; background: var(--sup); }
.plan + .plan { border-left: 1px solid var(--borde); }
.plan-pro { background: linear-gradient(180deg, rgba(220, 184, 95, .07), transparent 40%), var(--sup); box-shadow: inset 0 3px 0 var(--oro); }
.plan-cifra { margin: 0; font: 900 44px/1 var(--display); }
.plan-cifra small { font: 400 15px 'Inter', sans-serif; color: var(--suave); margin-left: 6px; }
.plan .lista-fina { margin-bottom: 28px; }
.plan .boton { margin-top: auto; align-self: flex-start; }

/* ── Registro ── */
.registro { padding-top: 130px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 56px; }
.registro-texto p { color: var(--suave); max-width: 40ch; margin: 0; }
.registro-texto .titulo-seccion { margin-bottom: 20px; }
.registro-caja { background: var(--sup); border: 1px solid var(--borde); border-radius: 16px; padding: 28px; }
.pestanas { display: flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; }
.pestanas button { flex: 1; min-height: 36px; border: 0; border-radius: 7px; background: none; color: var(--suave); font: 600 14px 'Inter', sans-serif; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--sup-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde-2); }
.formulario { display: grid; gap: 18px; }
.formulario label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.formulario input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--borde-2); background: var(--fondo); color: var(--texto); font: 400 15px 'Inter', sans-serif; }
.formulario input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(220, 184, 95, .18); }
.formulario input[aria-invalid="true"] { border-color: var(--mal); }
.formulario small { font-weight: 400; font-size: 13px; color: var(--tenue); min-height: 1.2em; }
.formulario small.mal { color: var(--mal); }
.formulario small.bien { color: var(--bien); }
.formulario .boton { margin-top: 4px; }
.formulario-error { margin: 0; color: var(--mal); font-size: 14px; }
.hecho h3 { margin: 0; font-size: 26px; }
.hecho > p:not(.etiqueta) { color: var(--suave); }
.hecho-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ── Descargar ── */
.descargar { padding-top: 130px; }
.descargas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.descarga { display: flex; align-items: center; gap: 18px; padding: 24px 28px; border: 1px solid var(--borde); border-radius: 14px; background: var(--sup); text-decoration: none; transition: border-color .15s, background .15s; }
.descarga:hover { border-color: var(--oro); background: var(--sup-2); }
.descarga.principal { border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
.descarga svg { width: 34px; height: 34px; fill: var(--texto); flex: none; }
.descarga b { display: block; font-size: 19px; }
.descarga small { color: var(--suave); font-size: 14px; }
.descarga.pronto { pointer-events: none; opacity: .55; }

/* ── Preguntas ── */
.preguntas { padding-top: 130px; }
.preguntas details { max-width: 880px; }
.preguntas details { border-top: 1px solid var(--borde); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--borde); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 17px; font-weight: 600; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font: 500 20px var(--mono); color: var(--oro); transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0 0 22px; color: var(--suave); max-width: 70ch; }

/* ── Pie ── */
.pie { margin-top: 140px; padding-top: 40px; padding-bottom: 48px; border-top: 1px solid var(--borde); display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; font-size: 13px; color: var(--tenue); }
.pie p { margin: 0; max-width: 60ch; }
.pie-marca { display: flex; align-items: center; gap: 10px; font: 900 14px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--texto); }
.pie-marca img { border-radius: 6px; }

/* ── Entrar en pantalla (sutil, y nada si se pide menos movimiento) ── */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .aparece { opacity: 1; transform: none; transition: none; } }

/* ── Pantallas medianas y móvil ── */
@media (max-width: 980px) {
  .portada, .pasos, .registro { grid-template-columns: 1fr; }
  .portada-captura { margin-right: calc(-1 * var(--lado)); }
  .flinch-portada { left: auto; right: 4px; bottom: -48px; width: 150px; height: 200px; }
  .pasos-captura { margin-top: 40px; }
  .funcion, .funcion.al-reves { grid-template-columns: 1fr; gap: 28px; }
  .funcion.al-reves .funcion-texto { order: 0; }
  .extras { grid-template-columns: 1fr 1fr; }
  .extra:nth-child(3) { padding-left: 0; border-left: 0; }
  .extra:nth-child(n + 3) { border-top: 1px solid var(--borde); }
}
@media (max-width: 640px) {
  .nav-enlaces { display: none; }
  .nav-cta { margin-left: auto; }
  .cinta span { padding: 0 10px; }
  .funcion-dobles { grid-template-columns: 1fr; }
  .funcion-dobles .funcion-captura:nth-child(2) { transform: none; }
  .extras, .planes, .descargas { grid-template-columns: 1fr; }
  .extra, .extra + .extra { padding-left: 0; border-left: 0; }
  .extra + .extra { border-top: 1px solid var(--borde); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--borde); }
  .pie { grid-template-columns: 1fr; }
  .registro-flinch { margin-top: 24px; }
  .flinch-registro { width: 150px; height: 200px; }
}

/* ── Páginas legales ── */
.legal { max-width: 780px; margin: 0 auto; padding: 56px var(--lado) 40px; }
.legal h1 { margin: 0 0 8px; font: 900 clamp(28px, 4vw, 40px)/1.1 var(--display); text-transform: uppercase; }
.legal .actualizado { margin: 0 0 40px; font: 500 12px var(--mono); color: var(--tenue); }
.legal h2 { margin: 44px 0 12px; font-size: 20px; }
.legal h3 { margin: 28px 0 8px; font-size: 16px; }
.legal p, .legal li { color: var(--suave); }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--texto); text-decoration-color: var(--oro); }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--borde); color: var(--suave); }
.legal th { color: var(--texto); font-weight: 600; }
.legal .formulario-modelo { padding: 20px; border: 1px dashed var(--borde-2); border-radius: 10px; background: var(--sup); }
.legal .indice { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 14px; }
/* Lo que falta por rellenar (datos del titular): se ve en rojo hasta que se pongan. */
.falta { color: var(--mal); background: rgba(239, 68, 68, .1); border-radius: 4px; padding: 0 4px; font-style: normal; }
.pie-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.pie-legal a { color: var(--suave); text-decoration: none; }
.pie-legal a:hover { color: var(--texto); }

/* Casillas (términos, empezar Pro ya) */
.casilla { display: flex !important; grid-template-columns: none; flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 13px !important; color: var(--suave); cursor: pointer; }
.casilla input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--oro); }
.casilla a { color: var(--texto); }
.hecho .casilla { margin-top: 20px; }
.plan-total { margin: 10px 0 0; font-size: 14px; color: var(--suave); }

/* ── Flinch, la mascota (flinch.js lo pone en 3D; mientras, o sin WebGL, la imagen fija) ── */
.flinch { position: relative; cursor: pointer; }
.flinch > img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .6)); }
.flinch.en-3d > img { display: none; }
.flinch-lienzo { display: block; width: 100% !important; height: 100% !important; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
/* Una sombra en el suelo, para que esté de pie y no flotando. */
.flinch::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 7%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); z-index: -1; }
.flinch-portada { position: absolute; left: -36px; bottom: -120px; width: clamp(170px, 16vw, 230px); height: clamp(220px, 21vw, 300px); z-index: 2; }
.registro-flinch { position: relative; margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; }
.flinch-registro { width: 230px; height: 300px; margin-left: -10px; }
/* El bocadillo, como el del tour de la app, con el pico hacia Flinch. */
.bocadillo { position: relative; max-width: 300px; margin: 0 0 6px 30px; padding: 14px 16px; border-radius: 16px; background: var(--sup-2); border: 1px solid var(--oro);
  color: var(--texto) !important; font-size: 15px; line-height: 1.45; box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.bocadillo::after { content: ''; position: absolute; left: 60px; bottom: -9px; width: 16px; height: 16px; transform: rotate(45deg);
  background: var(--sup-2); border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro); }
.bocadillo.nuevo { animation: bocadillo .35s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes bocadillo { from { transform: translateY(6px) scale(.96); opacity: .4; } }
.flinch-gracias { width: 240px; height: 300px; }
@media (prefers-reduced-motion: reduce) { .bocadillo.nuevo { animation: none; } }

/* Flinch en pantallas pequeñas (va al final para ganar a las reglas de arriba). */
@media (max-width: 980px) {
  .portada-captura { margin-bottom: 90px; }
  .flinch-portada { left: auto; right: calc(var(--lado) + 8px); bottom: -96px; width: 150px; height: 200px; }
}
@media (max-width: 640px) {
  .flinch-portada { width: 120px; height: 160px; bottom: -84px; }
  .flinch-registro { width: 170px; height: 220px; }
  .bocadillo { margin-left: 0; }
}

/* ── Enlaces con pinta de enlace dentro de los formularios (olvidé la contraseña, cerrar sesión) ── */
.enlace { justify-self: start; padding: 0; border: 0; background: none; color: var(--suave); font: 400 13px 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace:hover { color: var(--texto); }
.formulario-ayuda { margin: 0; font-size: 14px; color: var(--suave); }
[data-paso-codigo] { display: grid; gap: 18px; }
.hecho-salir { display: block; margin-top: 18px; }
.preguntas details a { color: var(--texto); text-decoration-color: var(--oro); }

/* ── Cierre: la última llamada antes del pie ── */
.cierre { margin-top: 130px !important; padding-top: 72px; padding-bottom: 72px; text-align: center; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  background: radial-gradient(60% 120% at 50% 0%, rgba(220, 184, 95, .08), transparent 70%); }
.cierre h2 { margin: 0; font: 900 clamp(26px, 3.6vw, 44px)/1.08 var(--display); text-transform: uppercase; }
.cierre h2 em { font-style: normal; color: var(--oro); }
.cierre p { margin: 18px auto 0; color: var(--suave); max-width: 52ch; }
.cierre .portada-botones { justify-content: center; }
.cierre + .pie, main:has(.cierre) + .visor + .pie { margin-top: 0; border-top: 0; }

/* ── Capturas ampliables y su visor ── */
.ampliable { cursor: zoom-in; transition: border-color .15s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.ampliable:hover { border-color: var(--oro) !important; }
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 24px 72px; border: 0; background: rgba(6, 6, 7, .94); color: var(--texto); }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(0, 0, 0, .6); }
.visor figure { margin: 0; max-width: min(1500px, 100%); display: grid; gap: 14px; justify-items: center; }
.visor figure img { max-height: calc(100vh - 120px); width: auto; border-radius: 12px; border: 1px solid var(--borde-2); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); }
.visor figcaption { margin: 0; max-width: 90ch; text-align: center; color: var(--suave); font: 400 13px/1.5 'Inter', sans-serif; }
.visor button { position: fixed; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border-radius: 50%; border: 1px solid var(--borde-2); background: var(--sup-2); color: var(--texto); font: 400 26px/1 'Inter', sans-serif; cursor: pointer; }
.visor button:hover { border-color: var(--oro); }
.visor-cerrar { top: 18px; right: 18px; }
.visor-ant { left: 14px; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .visor { padding: 64px 8px 72px; }
  .visor-ant, .visor-sig { top: auto; bottom: 16px; transform: none; }
  .visor-ant { left: calc(50% - 54px); } .visor-sig { right: calc(50% - 54px); }
}

/* ══ Pasada de diseño (v0.55): más profundidad y más aire, con los mismos colores ══ */
/* Botones y barra */
.boton-oro { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); transition: background .15s, box-shadow .2s, transform .15s; }
.boton-oro:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 32px rgba(220, 184, 95, .28); transform: translateY(-1px); }
.nav-enlaces a { position: relative; padding: 6px 0; transition: color .15s; }
.nav-enlaces a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.nav-enlaces a[aria-current] { color: var(--texto); }
.nav-enlaces a[aria-current]::after { transform: scaleX(1); }

/* Títulos de sección: una línea fina hasta el borde */
.titulo-seccion::after { content: ''; flex: 1; align-self: center; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--borde-2), transparent); }

/* Portada: la captura más grande, girada hacia ti y con un resplandor dorado detrás */
@media (min-width: 981px) { .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
main { overflow-x: clip; }
.portada h1 { font-size: clamp(30px, 4.1vw, 58px); }
.portada-captura { isolation: isolate; perspective: 1800px; }
.portada-captura::before { content: ''; position: absolute; inset: -18% -10% -22% -12%; z-index: -2; pointer-events: none;
  background: radial-gradient(50% 50% at 42% 48%, rgba(220, 184, 95, .2), transparent 70%); filter: blur(10px); }
.portada-captura > img:first-child { transform: rotateY(-9deg) rotateX(2.5deg); transform-origin: 0 50%; border-radius: 14px; border-right: 1px solid var(--borde);
  box-shadow: 0 50px 110px rgba(0, 0, 0, .7), 0 0 0 1px rgba(220, 184, 95, .06); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.portada-captura:hover > img:first-child { transform: rotateY(-5deg) rotateX(1.5deg); }
.flinch-portada { left: -64px; bottom: -110px; }

/* La cinta, girando */
.cinta.rueda { display: block; overflow: hidden; padding-left: 0; padding-right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cinta-pista { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta.rueda span { flex: none; padding: 0 22px; border-left: 1px solid var(--borde-2); white-space: nowrap; }
.cinta.rueda:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Capturas: se levantan un poco al pasar */
.pasos-captura img:hover, .funcion-captura img:hover { transform: translateY(-4px); box-shadow: 0 36px 70px rgba(0, 0, 0, .6), 0 0 60px rgba(220, 184, 95, .07); }
.funcion-captura img, .pasos-captura img { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .15s; }
.funcion h3 { font-size: clamp(23px, 2.4vw, 31px); letter-spacing: -.015em; }
.funcion .etiqueta { display: inline-flex; align-items: center; gap: 10px; }
.funcion .etiqueta::before { content: ''; width: 18px; height: 1px; background: var(--oro); }

/* Dos capturas: grandes y solapadas (la de detrás pasa delante al tocarla) */
.funcion-dobles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding-bottom: 8px; }
.funcion-dobles .funcion-captura { grid-row: 1; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.funcion-dobles .funcion-captura:nth-child(1) { grid-column: 1 / span 8; }
.funcion-dobles .funcion-captura:nth-child(2) { grid-column: 5 / span 8; margin-top: 21%; transform: none; z-index: 1; }
.funcion-dobles .funcion-captura:nth-child(1):hover { z-index: 2; }

/* Extras: con su icono */
.extras { border-bottom: 0; }
.extra { padding-top: 32px; padding-bottom: 32px; }
.extra-icono { width: 26px; height: 26px; margin-bottom: 16px; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Planes: visto dorado en vez de raya, y el sello de Pro */
.planes { box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.plan { padding: 40px; }
.plan .lista-fina li { padding-left: 26px; color: var(--texto); }
.plan .lista-fina li::before { top: .42em; left: 2px; width: 10px; height: 5px; background: none; border-left: 1.5px solid var(--oro); border-bottom: 1.5px solid var(--oro); transform: rotate(-45deg); }
.plan-pro { background: radial-gradient(90% 70% at 100% 0%, rgba(220, 184, 95, .13), transparent 60%), var(--sup); }
.plan-sello { margin-left: 10px; padding: 4px 8px; border-radius: 999px; background: var(--oro); color: var(--oro-osc); font-size: 10px; letter-spacing: .06em; }
.plan-cifra { font-size: clamp(40px, 4.4vw, 54px); }

/* Registro y descargas */
.registro-caja { box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.descarga { position: relative; padding-right: 64px; }
.descarga::after { content: '↓'; position: absolute; right: 26px; top: 50%; translate: 0 -50%; font: 500 20px var(--mono); color: var(--tenue); transition: color .15s, translate .2s; }
.descarga:hover::after { color: var(--oro); translate: 0 -35%; }
.descarga.pronto::after { content: none; }
.descarga.principal { background: linear-gradient(180deg, rgba(220, 184, 95, .08), transparent 70%), var(--sup); }
.preguntas summary { transition: color .15s; }
.preguntas summary:hover { color: var(--oro); }

@media (max-width: 980px) {
  .portada-captura > img:first-child, .portada-captura:hover > img:first-child { transform: none; border-radius: 14px 0 0 14px; border-right: 0; }
  .flinch-portada { left: auto; bottom: -96px; }
}
@media (max-width: 640px) {
  .funcion-dobles { grid-template-columns: 1fr; gap: 20px; }
  .funcion-dobles .funcion-captura:nth-child(n) { grid-column: auto; grid-row: auto; margin-top: 0; }
  .plan { padding: 28px; }
  .titulo-seccion::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } }

/* Preguntas: respuestas largas, en párrafos */
.preguntas details p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.preguntas details p:last-child { margin-bottom: 24px; }
.preguntas details[open] summary { color: var(--oro); }

/* ── Lo que solo hace Flinched: seis razones, en una rejilla con líneas finas ── */
.unico { padding-top: 130px; }
.unico-entrada { margin: -16px 0 40px; max-width: 62ch; font-size: 18px; color: var(--suave); }
.unico-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; background: var(--borde); gap: 1px; }
.unico-lista article { padding: 30px 28px 32px; background: var(--sup); transition: background .2s, opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.unico-lista article:hover { background: var(--sup-2); }
.unico-lista b { display: block; font: 900 15px/1.25 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--oro); }
.unico-lista p { margin: 12px 0 0; color: var(--suave); font-size: 15px; }

/* ── Índice de secciones de la app (a un clic) ── */
.secciones { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 56px; }
.secciones a { padding: 8px 14px; border: 1px solid var(--borde-2); border-radius: 999px; text-decoration: none; font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--suave); transition: color .15s, border-color .15s, background .15s; }
.secciones a:hover { color: var(--oro-osc); background: var(--oro); border-color: var(--oro); }
.funcion { scroll-margin-top: 90px; }

/* ── Jugar: lo que Flinched hace solo al acabar la partida ── */
.en-vivo { padding: 28px; border: 1px solid var(--borde); border-radius: 16px; background: radial-gradient(90% 70% at 100% 0%, rgba(220, 184, 95, .1), transparent 60%), var(--sup); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.en-vivo-titulo { margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--oro); }
.en-vivo ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; counter-reset: vivo; }
.en-vivo li { position: relative; padding: 16px 0 16px 30px; border-top: 1px solid var(--borde); }
.en-vivo li::before { content: ''; position: absolute; left: 4px; top: 23px; width: 11px; height: 6px; border-left: 1.5px solid var(--bien); border-bottom: 1.5px solid var(--bien); transform: rotate(-45deg); }
.en-vivo li b { display: block; font-size: 15px; }
.en-vivo li span { display: block; margin-top: 2px; font-size: 14px; color: var(--suave); }
#f-jugar { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }

@media (max-width: 980px) {
  .unico-lista { grid-template-columns: 1fr 1fr; }
  #f-jugar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .unico-lista, .en-vivo ol { grid-template-columns: 1fr; }
  .en-vivo { padding: 22px; }
}