/* Maqueta de la landing de Repeat Tools · lenguaje de la web de la comunidad (port de Quaker) */
:root {
  --milk: #f9f9f0; --ink: #1a1a1a; --text: rgba(28,28,28,.8); --mute: rgba(28,28,28,.55); --line: rgba(26,26,26,.16);
  --ds: #cf4a12; --ds-soft: #fbeee6; --fm: #0e7f5c; --fm-soft: #e7f2ef; --ux: #5b57e8; --ux-soft: #ecebfe;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --step-0: clamp(1rem, .94rem + .25vw, 1.25rem); --step-1: clamp(1.125rem, 1.02rem + .43vw, 1.56rem); --step-3: clamp(1.42rem, 1.19rem + 1.01vw, 2.44rem);
  --step-5: clamp(1.8rem, 1.33rem + 2vw, 3.81rem); --step-7: clamp(2.28rem, 1.43rem + 3.66vw, 5.96rem); --step-8: clamp(2.57rem, 1.43rem + 4.85vw, 7.45rem);
  --gutter: clamp(20px, 5.2vw, 104px); --max: 1600px; --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); --ease: cubic-bezier(.5,.5,0,1); --ease-io: cubic-bezier(.625,.05,0,1); --bounce: cubic-bezier(.32,1.51,.36,.97);
  --bg: var(--milk);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--milk); }
body { background: var(--bg); color: var(--text); font: 400 var(--step-0)/1.6 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; transition: background-color .9s var(--ease); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.serif { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -.01em; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font: 700 clamp(.79rem, .79rem + .01vw, .8rem) var(--sans); color: var(--ink); letter-spacing: .01em; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; font: 600 15px var(--sans); white-space: nowrap; transition: transform .6s var(--bounce), background .2s; }
.btn:hover { transform: scale(1.04); }
.btn-dark { background: var(--ink); color: var(--milk); } .btn-light { background: var(--milk); color: var(--ink); } .btn-line { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.btn svg { width: 16px; height: 16px; }
.mark { display: inline-grid; place-items: center; border-radius: 30%; }
.mark svg { width: 56%; height: 56%; }

/* ── nav ── */
.nav { position: fixed; z-index: 100; top: 14px; left: max(14px, calc(var(--edge) - 24px)); right: max(14px, calc(var(--edge) - 24px)); height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 10px 0 18px; border-radius: 18px; transition: background .4s, box-shadow .4s, color .4s; color: #fff; }
.nav.solid { background: rgba(249,249,240,.86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav .logo { display: flex; align-items: center; gap: 10px; font: 600 19px var(--sans); }
.nav .logo .mark { width: 30px; height: 30px; background: currentColor; } .nav .logo .mark svg { fill: var(--milk); }
.nav:not(.solid) .logo .mark svg { fill: var(--ink); }
.nav .links { display: flex; gap: 24px; margin: 0 auto; font: 500 14px var(--sans); }
.nav .links a { opacity: .85; display: flex; align-items: center; gap: 8px; } .nav .links a:hover { opacity: 1; }
.nav .links i { width: 8px; height: 8px; border-radius: 3px; }
.nav .right { display: flex; align-items: center; gap: 10px; font: 500 14px var(--sans); }
.nav .right .login { padding: 0 12px; opacity: .85; }
.nav:not(.solid) .btn-dark { background: #fff; color: var(--ink); }
.nav .logo, .nav .links a, .nav .right a { white-space: nowrap; }
@media (max-width: 1240px) { .nav .links { gap: 18px; } .nav .links a[href="#acceso"] { display: none; } }
@media (max-width: 900px) { .nav .links, .nav .right .login { display: none; } .nav .right { margin-left: auto; } }

/* ── hero: a sentence with three windows ── */
.hero { position: relative; height: 270vh; }
.hero .stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero .copy { position: absolute; left: var(--edge); right: var(--edge); top: 52%; transform: translateY(-50%); will-change: transform, opacity, filter; }
.hero .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2.4vw, 40px); }
.hero .eyebrow .dots { display: flex; gap: 6px; } .hero .eyebrow .dots i { width: 9px; height: 9px; border-radius: 3px; }
.hero h1 { font: 400 clamp(2.6rem, .8rem + 7.2vw, 10.2rem)/1.04 var(--serif); color: var(--ink); letter-spacing: -.028em; max-width: 15.5em; }
.hero h1 .w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.18em); animation: wIn 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 65ms + 150ms); }
@keyframes wIn { to { opacity: 1; filter: none; transform: none; } }
.slot { display: inline-block; width: 0; height: .74em; margin: 0 .06em; vertical-align: -.06em; transition: width 1.2s var(--ease-io), margin 1.2s var(--ease-io); }
.slot.open { width: 1.32em; margin: 0 .16em; }
.hero .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(22px, 3vw, 48px); }
.hero .sub p { max-width: 40ch; color: var(--text); }
.hero .sub .btns { display: flex; gap: 10px; }
.hero .scroll { position: absolute; right: var(--edge); bottom: clamp(20px, 4vh, 44px); color: var(--mute); font: 500 13px var(--sans); display: flex; gap: 10px; align-items: center; }
.flyer { position: absolute; left: 0; top: 0; z-index: 5; cursor: pointer; opacity: 0; }
.flyer .win { position: absolute; inset: 0; overflow: hidden; background: var(--c); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 30px 60px -28px rgba(20,20,30,.5); transition: transform .7s var(--bounce); }
.flyer .win video { width: 100%; height: 100%; object-fit: cover; }
.flyer .tip { position: absolute; left: 50%; top: -14px; transform: translate(-50%, -100%) scale(.9); opacity: 0; transition: opacity .25s, transform .5s var(--bounce); display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--ink); color: var(--milk); font: 600 14px var(--sans); pointer-events: none; }
.flyer .tip .mark { width: 22px; height: 22px; background: var(--c); }
.hero.inline .flyer:hover { z-index: 6; } .hero.inline .flyer:hover .win { transform: scale(1.35); } .hero.inline .flyer:hover .tip { opacity: 1; transform: translate(-50%, calc(-100% - .25em)) scale(1); top: -24%; }
.flyer .info { position: absolute; left: 0; right: 0; top: 100%; padding-top: 18px; opacity: 0; }
.flyer .info .t { display: flex; align-items: center; gap: 12px; font: 400 clamp(1.6rem, 1rem + 1.6vw, 2.8rem)/1 var(--serif); color: var(--ink); }
.flyer .info .t .mark { width: 30px; height: 30px; background: var(--c); }
.flyer .info p { margin-top: 8px; font-size: 16px; } .flyer .info small { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font: 600 14px var(--sans); color: var(--ink); }
.hero .trihead { position: absolute; left: var(--edge); right: var(--edge); top: 15vh; display: flex; justify-content: space-between; align-items: end; gap: 30px; opacity: 0; }
.hero .trihead h2 { font: 400 var(--step-7)/1 var(--serif); color: var(--ink); }
.hero .trihead p { max-width: 38ch; }

/* ── statement ── */
.statement { padding-block: clamp(80px, 16vh, 200px) clamp(60px, 10vh, 140px); }
.statement p { font-family: var(--serif); color: var(--ink); font-size: var(--step-7); line-height: 1.04; letter-spacing: -.015em; max-width: 17ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.statement p .w { opacity: .14; transition: opacity .25s linear; }
.statement p em { font-style: italic; }

/* ── cycle ── */
.cycle { padding-block: 0 clamp(80px, 14vh, 180px); }
.cycle .head { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.cycle h2 { font-size: var(--step-7); line-height: 1.02; }
.cycle .head p { max-width: 42ch; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.step { position: relative; padding: 36px 32px 10px 0; border-right: 1px solid var(--line); } .step:last-child { border-right: 0; } .step + .step { padding-left: 32px; }
.step .num { font: 400 var(--step-8)/1 var(--serif); color: var(--ink); display: flex; align-items: center; gap: 18px; }
.step .num .mark { width: 54px; height: 54px; transform: scale(.4) rotate(-20deg); opacity: 0; transition: transform .8s var(--bounce), opacity .4s; }
.step.on .num .mark { transform: none; opacity: 1; }
.step h3 { font: 700 var(--step-1) var(--sans); color: var(--ink); margin: 22px 0 8px; }
.step p { max-width: 34ch; }
.step a { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font: 600 15px var(--sans); color: var(--ink); }
.step .bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease-io); }
.step.on .bar { transform: scaleX(1); }
@media (max-width: 900px) { .cycle .head { flex-direction: column; align-items: start; } .steps { grid-template-columns: 1fr; } .step, .step + .step { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--line); } }

/* ── tool chapters ── */
.tool { position: relative; padding-block: clamp(60px, 10vh, 140px); }
.tool .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.tool .side { position: sticky; top: 110px; }
.tool .tag { display: flex; align-items: center; gap: 12px; font: 700 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.tool .tag .mark { width: 40px; height: 40px; }
.tool h2 { font-size: var(--step-8); line-height: .95; margin: 22px 0 14px; }
.tool .line { font: 400 italic var(--step-3)/1.2 var(--serif); color: var(--ink); margin-bottom: 22px; }
.tool .desc { max-width: 44ch; }
.tool ul { list-style: none; margin: 26px 0 30px; border-top: 1px solid var(--line); }
.tool li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--text); }
.tool li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.tool li b { color: var(--ink); font-weight: 600; }
.tool .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.player { position: relative; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 60px 120px -50px rgba(20,20,30,.55); transform-origin: 50% 0; }
.player video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.player .ctrl { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: rgba(20,20,24,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.player:hover .ctrl, .player.paused .ctrl { opacity: 1; transform: none; }
.ctrl button { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; } .ctrl button:hover { background: rgba(255,255,255,.14); }
.ctrl svg { width: 18px; height: 18px; }
.ctrl .track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.2); cursor: pointer; } .ctrl .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #fff; }
.ctrl .track b { position: absolute; top: -3px; width: 2px; height: 12px; background: rgba(255,255,255,.5); border-radius: 2px; }
.ctrl .time { font: 500 13px var(--mono); min-width: 84px; text-align: right; }
.sound { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; border: 0; }
.sound svg { width: 16px; height: 16px; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 16px; }
.chap { all: unset; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px var(--sans); color: var(--ink); transition: background .3s, box-shadow .3s, transform .4s var(--bounce); }
.chap small { font: 500 12px var(--mono); color: var(--mute); }
.chap:hover { transform: translateY(-2px); background: #fff; }
.chap.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c); }
.chap .p { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c); width: 0; }
@media (max-width: 1024px) { .tool .grid { grid-template-columns: 1fr; } .tool .side { position: static; } }

/* ── principles (dark) ── */
.dark { background: #121214; color: rgba(249,249,240,.72); border-radius: clamp(20px, 3vw, 40px); margin-inline: max(12px, calc(var(--edge) - 40px)); padding-block: clamp(70px, 12vh, 150px); position: relative; overflow: hidden; }
.dark .serif { color: var(--milk); }
.dark h2 { font-size: var(--step-7); line-height: 1.02; max-width: 16ch; }
.pr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.pr article { padding: 30px 28px 34px; border-radius: 24px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pr .k { font: 400 var(--step-7)/1 var(--serif); color: var(--milk); }
.pr h3 { font: 700 var(--step-1) var(--sans); color: var(--milk); margin: 26px 0 10px; }
.dark .glow { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(120px); opacity: .22; pointer-events: none; }
@media (max-width: 900px) { .pr { grid-template-columns: 1fr; } }

/* ── access ── */
.access { padding-block: clamp(90px, 14vh, 180px); }
.access .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 100px); align-items: center; }
.access h2 { font-size: var(--step-8); line-height: .96; }
.access .lead { font-size: var(--step-1); margin: 22px 0 26px; max-width: 34ch; color: var(--ink); }
.incl { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); margin-bottom: 30px; }
.incl li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; } .incl li b { color: var(--ink); font-weight: 600; }
.member { margin-top: 18px; font-size: 15px; } .member a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wall { position: relative; height: 640px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.wcol { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.rv { background: #fff; border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: 15.5px; line-height: 1.55; }
.rv q { quotes: "“" "”"; color: var(--ink); }
.rv .who { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 600 14px var(--sans); color: var(--ink); } .rv .who i { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--milk); display: grid; place-items: center; font: 600 12px var(--sans); font-style: normal; } .rv .who small { display: block; font-weight: 500; color: var(--mute); }
.pause { all: unset; cursor: pointer; position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 8px; align-items: center; font: 600 13px var(--sans); color: var(--ink); background: var(--milk); padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 1024px) { .access .grid { grid-template-columns: 1fr; } .wall { height: 520px; } }

/* ── faq ── */
.faq { padding-block: 0 clamp(90px, 14vh, 180px); }
.faq .in { max-width: 920px; margin: 0 auto; }
.faq h2 { font-size: var(--step-7); margin-bottom: 30px; }
.faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font: 600 var(--step-1)/1.3 var(--sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: transform .5s var(--bounce), background .3s; }
.faq details[open] summary span { transform: rotate(45deg); background: var(--ink); color: var(--milk); }
.faq .a { overflow: hidden; } .faq .a p { padding: 0 0 26px; max-width: 68ch; }

/* ── final ── */
.final { position: relative; margin: 0 max(12px, calc(var(--edge) - 40px)); border-radius: clamp(20px, 3vw, 40px); overflow: hidden; min-height: 92vh; display: grid; align-items: end; color: #fff; }
.final video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.1); transform: scale(1.04); }
.final .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.2), rgba(10,10,12,.78)); }
.final .in { position: relative; padding: clamp(24px, 4vw, 72px); padding-bottom: clamp(40px, 8vh, 90px); }
.final h2 { font: 400 var(--step-8)/.95 var(--serif); color: #fff; max-width: 14ch; letter-spacing: -.02em; }
.final p { max-width: 46ch; margin: 22px 0 28px; color: rgba(255,255,255,.85); font-size: var(--step-1); }

/* ── footer ── */
footer { padding-block: clamp(60px, 10vh, 110px) 40px; font-size: 15px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
footer h6 { font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
footer .cols a { display: block; padding: 4px 0; } footer .cols a:hover { color: var(--ink); }
footer .big { font: 400 clamp(3rem, 1rem + 9vw, 11rem)/.85 var(--serif); color: var(--ink); letter-spacing: -.03em; margin: 50px 0 30px; }
footer .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--mute); }
@media (max-width: 900px) { footer .cols { grid-template-columns: 1fr 1fr; } }

/* reveal on scroll */
.rev { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; } .statement p .w { opacity: 1; } }