/* Restia landing · dark lock (la noche del servicio) · un acento: brasa */

@font-face { font-family:"Fraunces"; src:url("fonts/Fraunces-normal-300-700.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("fonts/Fraunces-italic-300-700.woff2") format("woff2"); font-weight:300 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("fonts/InstrumentSans-normal-400-700.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("fonts/InstrumentSans-italic-400-700.woff2") format("woff2"); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-normal-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-normal-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root {
  --char:#161210; --char-2:#1E1915; --char-3:#282019;
  --line:rgba(240,226,205,.14); --line-strong:rgba(240,226,205,.24);
  --ink:#F4EDE0; --body:#C9BBA6; --muted:#8F8270;
  --ember:#D4602B; --ember-glow:#F0B48A; --ember-deep:#A8461C;
  --ok:#7FAE88;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --night:radial-gradient(140% 100% at 50% -10%, #241C15 0%, #161210 55%, #100D0B 100%);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--char); background-image:var(--night); background-attachment:fixed;
  color:var(--body); font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--serif); color:var(--ink); font-weight:520; letter-spacing:-0.015em; line-height:1.08; font-variation-settings:"SOFT" 30,"WONK" 0; }
em { font-style:italic; color:var(--ember-glow); }
main { max-width:1200px; margin:0 auto; padding:0 24px; }
section { padding:96px 0; border-top:1px solid var(--line); }
section:first-of-type { border-top:none; }
.src { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); margin-top:10px; }
.eyebrow { font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }

/* wordmark */
.wm { font-family:var(--serif); font-style:italic; font-weight:520; font-variation-settings:"SOFT" 60,"WONK" 1; color:var(--ink); font-size:24px; line-height:1.2; padding-bottom:2px; }
.wm .dot { color:var(--ember); font-style:normal; }

/* nav */
.nav { max-width:1200px; margin:0 auto; padding:20px 24px; height:72px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav nav { display:flex; align-items:center; gap:28px; }
.navlink { color:var(--body); text-decoration:none; font-size:16px; }
.navlink:hover { color:var(--ink); }

/* buttons */
.btn {
  display:inline-block; background:var(--ember); color:#1D120B; text-decoration:none;
  font-weight:600; border:none; border-radius:10px; cursor:pointer;
  transition:transform .15s cubic-bezier(.16,1,.3,1), background .15s;
}
.btn:hover { background:var(--ember-glow); }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-small { padding:10px 20px; font-size:15px; }
.btn-hero { padding:16px 34px; font-size:18px; margin-top:36px; }
.btn-submit { padding:15px 30px; font-size:17px; font-family:var(--sans); margin-top:8px; width:100%; }

/* hero */
.hero { display:grid; grid-template-columns:7fr 5fr; gap:72px; align-items:center; padding-top:64px; min-height:calc(100dvh - 72px); }
.hero h1 { font-size:clamp(44px, 5.4vw, 76px); max-width:12ch; }
.lead { font-size:20px; margin-top:26px; max-width:44ch; }

.hero-convo { border-left:1px solid var(--line); padding-left:44px; }
.convo-label, .line.who { font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; }
.convo-label { color:var(--ember-glow); margin-bottom:22px; }
.line.who { color:var(--muted); margin-bottom:14px; }
.line { margin-bottom:16px; font-size:17.5px; line-height:1.5; }
.line.ella { font-family:var(--serif); font-style:italic; color:var(--ink); }
.line.restia { color:var(--body); }
.line .tag { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); margin-right:10px; }
.wa { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.bub { border-radius:14px; padding:12px 16px; font-size:15.5px; max-width:88%; }
.bub.head { background:var(--char-3); color:var(--ink); }
.bub.head b { display:block; }
.bub.head b::after { content:" ✓"; color:var(--ok); }
.bub .meta { font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.bub.out { background:var(--char-2); border:1px solid var(--line); color:var(--body); align-self:flex-end; }
.bub.in { background:var(--char-3); color:var(--ink); }
.convo-note { margin-top:24px; font-size:14.5px; color:var(--muted); }

/* reveal cascade (hero convo) */
.hero-convo > * { opacity:0; transform:translateY(10px); animation:rise .7s cubic-bezier(.16,1,.3,1) forwards; }
.hero-convo > *:nth-child(1){animation-delay:.15s} .hero-convo > *:nth-child(2){animation-delay:.3s}
.hero-convo > *:nth-child(3){animation-delay:.55s} .hero-convo > *:nth-child(4){animation-delay:.95s}
.hero-convo > *:nth-child(5){animation-delay:1.35s} .hero-convo > *:nth-child(6){animation-delay:1.75s}
.hero-convo > *:nth-child(7){animation-delay:2.2s}
@keyframes rise { to { opacity:1; transform:none; } }

/* fuga */
.fuga-grid { display:grid; grid-template-columns:3fr 2fr; gap:64px 96px; }
.stat.big { grid-row:span 2; }
.stat .n { font-family:var(--serif); font-weight:480; color:var(--ink); font-size:64px; line-height:1; letter-spacing:-0.02em; font-variation-settings:"SOFT" 40; }
.stat.big .n { font-size:clamp(96px, 11vw, 160px); color:var(--ember-glow); }
.stat .n .de { font-size:.38em; font-style:italic; color:var(--muted); font-weight:400; }
.stat p { margin-top:16px; max-width:40ch; }
.stat.big p { font-size:20px; max-width:34ch; }
.stat + .stat { border-top:1px solid var(--line); padding-top:40px; }

/* pregunta */
.pregunta { text-align:center; padding:120px 0; }
.pregunta h2 { font-size:clamp(34px, 4.4vw, 62px); max-width:22ch; margin:0 auto; }
.pregunta p { margin-top:24px; font-size:19px; color:var(--muted); }
.pregunta p { position:relative; display:inline-block; margin-top:34px; padding-top:26px; }
.pregunta p::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:2px; background:linear-gradient(90deg, transparent, var(--ember) 30%, var(--ember) 70%, transparent); }

/* qué hace */
.hace-title { font-size:clamp(38px, 4.6vw, 64px); }
.hace-lead { margin-top:20px; font-size:19px; max-width:52ch; }
.pasos { list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); margin-top:64px; }
.pasos li { padding:26px 28px 0 0; margin-right:28px; border-top:1px solid var(--line-strong); }
.pasos li:last-child { margin-right:0; padding-right:0; }
.pasos h3 { font-size:22px; }
.pasos p { margin-top:10px; font-size:15px; color:var(--muted); }

/* no-show */
.noshow { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center; }
.ns-copy h2 { font-size:clamp(30px, 3.2vw, 44px); }
.ns-copy p { margin-top:22px; max-width:46ch; }
.ns-drop .was { font-family:var(--serif); font-size:52px; color:var(--muted); text-decoration:line-through; text-decoration-color:var(--ember); text-decoration-thickness:3px; }
.ns-drop .now { font-family:var(--serif); font-size:clamp(80px, 8vw, 128px); color:var(--ember-glow); line-height:1; margin-top:12px; }
.ns-drop span { font-family:var(--sans); font-size:16px; color:var(--body); margin-left:14px; text-decoration:none; }
.ns-drop .now span { display:block; margin:14px 0 0; font-size:17px; }

/* quiénes */
.quienes h2 { font-size:clamp(32px, 3.6vw, 50px); max-width:22ch; }
.q-lead { margin-top:20px; font-size:19px; max-width:54ch; }
.pruebas { list-style:none; margin-top:48px; max-width:760px; }
.pruebas li { padding:22px 0; border-top:1px solid var(--line); font-size:17.5px; }
.pruebas b { color:var(--ink); }

/* demo form */
.demo { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.demo-copy h2 { font-size:clamp(36px, 4vw, 58px); }
.demo-copy p { margin-top:22px; font-size:18px; max-width:44ch; }
.demo form { display:flex; flex-direction:column; gap:22px; padding:40px; background:var(--char-2); border:1px solid var(--line); border-radius:16px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { color:var(--ink); font-weight:600; font-size:15.5px; }
.field input {
  background:var(--char); border:1px solid var(--line-strong); border-radius:10px;
  padding:13px 16px; font:inherit; font-size:16.5px; color:var(--ink);
}
.field input:focus { outline:2px solid var(--ember); outline-offset:1px; border-color:transparent; }
.field .help { font-size:13.5px; color:var(--muted); }

/* footer */
.foot { max-width:1200px; margin:0 auto; padding:40px 24px 56px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.f-brand { display:flex; align-items:center; gap:10px; }
.f-brand .wm { font-size:19px; }
.f-by { font-size:14.5px; color:var(--muted); }

/* scroll reveal */
.rv { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity:1; transform:none; }

/* mobile */
@media (max-width: 860px) {
  section { padding:64px 0; }
  .hero { grid-template-columns:1fr; gap:56px; min-height:auto; padding-top:40px; }
  .hero-convo { border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:36px; }
  .fuga-grid { grid-template-columns:1fr; gap:48px; }
  .stat.big { grid-row:auto; }
  .pasos { grid-template-columns:1fr; gap:0; }
  .pasos li { margin-right:0; padding:22px 0; }
  .noshow, .demo { grid-template-columns:1fr; gap:48px; }
  .navlink { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-convo > * { animation:none; opacity:1; transform:none; }
  .rv { opacity:1; transform:none; transition:none; }
}