/* rondo · somosrondo.es
   Tokens del Rondo Design System. Tipografías: sustitutas de Google Fonts
   (Bricolage Grotesque / Space Grotesk / Space Mono) hasta tener las originales. */
:root{
  --ink-0:#0e1110; --ink-1:#191c1a; --ink-2:#262a28; --ink-3:#3e4642; --ink-4:#6b716d; --ink-5:#9a9e9a;
  --cream:#f3f1ec; --cream-2:#e6e3db;
  --lime:#b8e832; --lime-hover:#c6f04f; --lime-press:#a3d11f;
  --error:#e8603c;

  --bg:var(--ink-1); --card:var(--ink-0); --line:var(--ink-2); --line-strong:var(--ink-3);
  --text:var(--cream); --text-2:var(--ink-5); --text-3:var(--ink-4);

  --font-display:'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;

  --r-md:10px; --r-lg:14px; --r-xl:20px;
  --glow:0 0 0 4px rgba(184,232,50,.18);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-loop:cubic-bezier(.65,0,.35,1);
  --nav-h:68px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--lime)}
a:hover{color:var(--lime-hover)}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;text-wrap:balance}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--lime);color:var(--ink-0);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.container{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}
.g2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stack-56{display:flex;flex-direction:column;gap:56px}
.section{padding:140px 0}
.accent{color:var(--lime)}
.muted{color:var(--text-2)}

/* ---------- type ---------- */
.eyebrow,.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.eyebrow-on-accent{color:var(--ink-2)}
h1{font-size:clamp(52px,7.4vw,108px);line-height:.98;letter-spacing:-.045em}
h2{font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.035em}
.lead{font-size:19px;line-height:1.5;color:var(--text-2);max-width:520px;text-wrap:pretty}
.sub{font-size:18px;color:var(--text-2);max-width:600px}
.note{font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text-3)}
.section-title{display:flex;flex-direction:column;gap:20px;max-width:780px}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo:hover{color:var(--text)}
.logo-dots{width:30px;height:30px;flex:none}
.logo-word{font-family:var(--font-display);font-weight:800;font-size:27px;letter-spacing:-.045em;line-height:1;transform:translateY(-2px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--font-body);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background 120ms var(--ease-out),transform 120ms var(--ease-out),border-color 120ms}
.btn:active{transform:scale(.97)}
.btn-sm{height:34px;padding:0 14px;font-size:13px}
.btn-lg{height:52px;padding:0 24px;font-size:17px}
.btn-full{width:100%}
.btn-primary{background:var(--lime);color:var(--ink-0)}
.btn-primary:hover{background:var(--lime-hover);color:var(--ink-0)}
.btn-primary:active{background:var(--lime-press)}
.btn-secondary{background:var(--card);color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--ink-2);color:var(--text)}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r-lg);padding:32px;border:1px solid transparent}
.card-outline{background:transparent;border-color:var(--line-strong)}
.card-title{font-size:36px;letter-spacing:-.03em;margin-bottom:24px}
.dots-list{display:flex;flex-direction:column;gap:12px}
.dots-list li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--text-2)}
.dots-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none;transform:translateY(-2px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:40;height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:background 200ms var(--ease-out),border-color 200ms}
.nav.solid{background:rgba(14,17,16,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;transition:color 120ms}
.nav-links a:hover{color:var(--text)}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0 60px}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.diagram{position:relative;width:100%;aspect-ratio:640/480;will-change:transform}
.diagram svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.diagram-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--text-2)}
.pill-text{font-family:var(--font-mono);font-size:12px;fill:var(--text)}
.flow{stroke-dasharray:4 14;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}

/* ---------- the rondo ring (six dots, one ball) ---------- */
.ring{position:absolute}
.ring-sm,.ring-md,.ring-xs{position:relative;flex:none}
.ring-sm{width:44px;height:44px}
.ring-md{width:64px;height:64px}
.ring-xs{width:38px;height:38px}
.ring-rot{position:absolute;inset:0}
.ring .dot{position:absolute;border-radius:50%;background:var(--cream);transition:all 460ms var(--ease-loop)}
.ring .dot.ball{background:var(--lime)}
.ring .dot.off{background:var(--ink-3)}

/* ---------- how ---------- */
.how{height:280vh;position:relative}
.how-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.how-inner{display:flex;flex-direction:column;gap:64px}
.track{position:relative;height:40px}
.track-line,.track-fill{position:absolute;left:0;top:19px;height:2px}
.track-line{right:0;background:var(--ink-3)}
.track-fill{width:0;background:var(--lime)}
.track-stop{position:absolute;top:6px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--bg);border:2px solid var(--ink-3);transition:all 200ms var(--ease-out)}
.track-stop.on{background:var(--lime);border-color:var(--lime)}
.track-ball{position:absolute;left:0;top:8px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(184,232,50,.12)}
.step{display:flex;flex-direction:column;gap:14px;opacity:.32;transform:translateY(8px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.step.on{opacity:1;transform:none}
.step-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.step.on .step-tag{color:var(--lime)}
.step h3{font-size:32px;letter-spacing:-.03em}
.step p{font-size:16px;line-height:1.55;color:var(--text-2);text-wrap:pretty}

/* ---------- calculator ---------- */
.calc{align-items:stretch}
.calc-inputs{display:flex;flex-direction:column;gap:36px;padding:36px}
.slider{display:flex;flex-direction:column;gap:12px}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.slider output{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em}
.slider output small{font:500 15px var(--font-body);color:var(--text-2);margin-left:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;margin:8px 0;background:linear-gradient(to right,var(--lime) var(--p,50%),var(--ink-2) var(--p,50%));outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cream);border:0;cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:0;cursor:grab}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--glow)}
input[type=range]:focus-visible{outline:none}
.calc-result{display:flex;flex-direction:column;gap:24px;padding:36px}
.big-num{font-family:var(--font-display);font-weight:700;font-size:clamp(64px,8vw,104px);line-height:.95;letter-spacing:-.045em;color:var(--lime)}
.calc-result .sub{margin-top:8px}
.hour-dots{display:grid;grid-template-columns:repeat(24,1fr);gap:5px}
.hour-dots span{aspect-ratio:1;border-radius:50%;background:var(--ink-2);transition:background 300ms var(--ease-out)}
.hour-dots span.on{background:var(--lime)}
.hour-legend{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.calc-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.year{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em}
.calc-foot .muted{font-size:14px}

/* ---------- about ---------- */
.about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.about-photo{margin:0;aspect-ratio:2/3;border-radius:var(--r-xl);overflow:hidden;background:var(--card);border:1px solid var(--line)}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.about-copy{display:flex;flex-direction:column;gap:28px}
.about-copy h2{font-size:clamp(32px,4.2vw,54px);line-height:1.06}
.about-copy .lead{font-size:18px;max-width:none}
.about-foot{border-top:1px solid var(--line);padding-top:24px;display:flex;gap:24px;align-items:center}
.about-foot p{flex:1;min-width:0;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--text-2)}

/* ---------- faq ---------- */
#faq{padding-top:100px}
.faq{align-items:flex-start;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;font:600 20px/1.3 var(--font-body);letter-spacing:-.01em}
.faq-icon{position:relative;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line-strong);transition:all 200ms var(--ease-out)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.75px;margin:-.875px 0 0 -6px;background:var(--text-2);border-radius:2px}
.faq-icon::after{transform:rotate(90deg)}
.faq-q[aria-expanded=true] .faq-icon{transform:rotate(45deg);border-color:var(--lime)}
.faq-q[aria-expanded=true] .faq-icon::before,.faq-q[aria-expanded=true] .faq-icon::after{background:var(--lime)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease-out)}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 48px 26px 0;font-size:16px;line-height:1.6;color:var(--text-2)}
.faq-q[aria-expanded=true]+.faq-a{grid-template-rows:1fr}

/* ---------- contact ---------- */
.contact-wrap{padding:40px 0 120px}
.contact{background:var(--lime);color:var(--ink-0);border-radius:28px;padding:clamp(28px,5vw,64px)}
.contact-grid{align-items:stretch}
.contact-copy{display:flex;flex-direction:column;gap:24px}
.contact-copy h2{font-size:clamp(40px,5.4vw,72px);line-height:1;letter-spacing:-.04em}
.contact-lead{font-size:20px;line-height:1.45;max-width:440px}
.contact-direct{margin-top:auto;display:flex;flex-direction:column;font-size:15px;line-height:1.8;font-weight:500}
.contact-direct a{color:var(--ink-0);text-decoration:none;width:max-content;max-width:100%;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 200ms var(--ease-out)}
.contact-direct a:hover{color:var(--ink-0);background-size:100% 1px}
.form{background:var(--ink-0);color:var(--text);border-radius:var(--r-xl);padding:32px;min-height:460px;display:flex}
.form-fields{flex:1;display:flex;flex-direction:column;gap:18px}
.form-fields .btn{margin-top:auto}
.field{display:flex;flex-direction:column;gap:8px}
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 16px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line-strong);color:var(--text);font:15px var(--font-body);outline:none;transition:border-color 120ms var(--ease-out),box-shadow 120ms var(--ease-out)}
.field textarea{height:auto;padding:12px 16px;resize:vertical;min-height:84px}
.field ::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime);box-shadow:var(--glow)}
.field.invalid input{border-color:var(--error)}
.field-error{font-family:var(--font-mono);font-size:12px;color:var(--error)}
.field-error:empty{display:none}
.select{position:relative;display:block}
.select select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.select::after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--lime);pointer-events:none}
.form-done{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}
.form-done[hidden],.form-fields[hidden]{display:none}
.done-title{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.03em}
.form-done .btn{align-self:flex-start}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:40px 0 56px}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.footer-logo{display:flex;flex-direction:column;gap:10px}
.footer-logo .logo-dots{width:34px;height:34px}
.footer-logo .logo-word{font-size:36px}
.tagline{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);padding-left:44px}
.footer-meta{font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--text-2);text-align:right}
.footer-meta a{color:var(--text-2)}
.footer-meta a:hover{color:var(--text)}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:24px;bottom:24px;z-index:30;width:60px;height:60px;border-radius:50%;background:var(--ink-0);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transform:scale(.8);pointer-events:none;transition:opacity 200ms,transform 200ms var(--ease-out)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .g2,.g3,.about,.faq{grid-template-columns:minmax(0,1fr)}
  .nav-links{display:none}
  .nav-inner .btn{margin-left:auto}
  .section{padding:96px 0}
  .hero{min-height:0;padding:120px 0 40px}
  .how{height:auto;padding:96px 0}
  .how-sticky{position:static;height:auto;overflow:visible}
  .how-inner{gap:48px}
  .track{display:none}
  .steps{gap:40px}
  .step{opacity:1;transform:none;padding-left:20px;border-left:2px solid var(--lime)}
  .step .step-tag{color:var(--lime)}
  .about-photo{max-width:420px}
  .footer-meta{text-align:left}
}
@media (max-width:560px){
  .container{padding:0 16px}
  .card,.calc-inputs,.calc-result{padding:24px}
  .form{padding:22px;min-height:0}
  .hour-dots{gap:3px}
  .step-meta{flex-direction:column;gap:4px}
  .hero-ctas .btn{flex:1 1 100%}
  .faq-q{font-size:18px}
  .faq-a p{padding-right:0}
  .contact{border-radius:22px}
  .to-top{right:16px;bottom:16px;width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flow{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .ring .dot,.step,.faq-a{transition:none}
}