/* RK Marketing Systems — estilos compartidos (subpáginas) */
:root{
  --ink:#0A0A0B; --ink-900:#151515; --ink-700:#3A3A38; --ink-500:#6B6A66; --ink-300:#A6A49E;
  --gray-200:#D8D6D0; --gray-100:#EAE8E3; --gray-050:#F6F5F2; --white:#FFFFFF;
  --signal:#FF4D1C; --signal-dark:#C93A12; --signal-soft:#FFE4D8;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --maxw:920px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; font-family:var(--font-body); color:var(--ink-700); background:var(--white); -webkit-font-smoothing:antialiased; }
[id]{ scroll-margin-top:76px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Logo */
.rk-logo{ display:inline-flex; flex-direction:column; gap:.22em; color:var(--ink); text-decoration:none; }
.rk-logo .mark{ display:flex; align-items:center; font-family:var(--font-display); font-weight:700; line-height:1; letter-spacing:-.02em; font-size:28px; }
.rk-logo .mark .node{ width:.16em; height:.16em; border-radius:50%; background:var(--signal); margin:0 .1em; flex:0 0 auto; }
.rk-logo .sub{ font-family:var(--font-body); font-weight:700; letter-spacing:.34em; text-transform:uppercase; font-size:7px; }
.rk-logo.on-dark{ color:#fff; }

/* Nav */
nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--gray-100); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1140px; margin:0 auto; }
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-700); text-decoration:none; }
.nav-links a:hover{ color:var(--ink-900); }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.btn:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; }
.btn.primary{ background:var(--signal); color:#fff; }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(255,77,28,.35); }
.btn.ghost{ background:transparent; color:var(--ink-900); border:2px solid var(--ink-900); }
.btn.ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.5); }
.btn.small{ font-size:14px; padding:10px 20px; }
a:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; border-radius:6px; }

/* Tipografía */
.eyebrow{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--signal); }
.eyebrow.neutral{ color:var(--ink-500); }
h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:clamp(34px,5vw,52px); line-height:1.08; color:var(--ink-900); margin:14px 0 0; text-wrap:balance; }
h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:clamp(26px,3.4vw,34px); line-height:1.15; color:var(--ink-900); margin:0; text-wrap:balance; }
h3{ font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.3; color:var(--ink-900); margin:0; }
.lead{ font-size:clamp(17px,2vw,21px); line-height:1.55; color:var(--ink-700); max-width:680px; }
p{ font-size:16.5px; line-height:1.65; margin:0; }
.muted{ color:var(--ink-500); }
.strong{ color:var(--ink-900); font-weight:700; }

/* Hero de subpágina */
.sub-hero{ background:var(--ink); padding:72px 0 80px; position:relative; overflow:hidden; }
.sub-hero .crumb{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.04em; color:rgba(255,255,255,.45); margin-bottom:22px; }
.sub-hero .crumb a{ color:rgba(255,255,255,.65); text-decoration:none; }
.sub-hero .crumb a:hover{ color:#fff; }
.sub-hero h1{ color:#fff; }
.sub-hero .lead{ color:rgba(255,255,255,.78); margin-top:18px; }
.sub-hero .price-row{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:28px; }
.sub-hero .price{ font-family:var(--font-display); font-weight:700; font-size:48px; letter-spacing:-.02em; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.sub-hero .per{ font-size:16px; color:var(--signal); font-weight:700; }
.sub-hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hero-bar{ height:6px; background:var(--signal); width:96px; margin-top:34px; }

/* Secciones */
section{ padding:72px 0; }
section + section{ border-top:1px solid var(--gray-100); }
section.gray{ background:var(--gray-050); }

/* Lista de features */
.feat{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.feat li{ display:flex; gap:14px; align-items:flex-start; font-size:16.5px; line-height:1.55; color:var(--ink-700); }
.feat .ck{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--signal); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:13px; margin-top:3px; }

/* Paneles */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; }
.panel{ border:1px solid var(--gray-100); border-radius:18px; padding:26px; background:var(--white); }
.panel.sunken{ background:var(--gray-050); }
.panel.outline{ border:2px solid var(--ink-900); }
.panel h3{ font-size:18px; }
.panel p{ font-size:15px; margin-top:10px; }

/* FAQ */
.faq{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.faq details{ border:1px solid var(--gray-100); border-radius:14px; background:var(--white); overflow:hidden; }
.faq summary{ cursor:pointer; padding:18px 22px; font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--ink-900); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; color:var(--signal); flex:0 0 auto; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 22px 20px; font-size:15.5px; }

/* CTA final */
.cta-final{ background:var(--ink); text-align:center; padding:88px 0; }
.cta-final h2{ color:#fff; font-size:clamp(30px,5vw,44px); }
.cta-final .lead{ color:rgba(255,255,255,.78); margin:18px auto 0; }
.cta-final .btn{ margin-top:34px; }
.cta-final .wa{ font-family:var(--font-display); font-weight:600; font-size:15px; color:rgba(255,255,255,.55); margin-top:22px; }

/* Links entre servicios */
.rel{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
.rel a{ border:1px solid var(--gray-100); border-radius:14px; padding:20px 22px; background:var(--gray-050); text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink-900); transition:transform .2s ease, box-shadow .2s ease; }
.rel a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.rel a span{ display:block; font-family:var(--font-body); font-weight:400; font-size:13.5px; color:var(--ink-500); margin-top:6px; }

/* Footer */
footer{ background:var(--ink); border-top:1px solid rgba(255,255,255,.1); padding:40px 0; }
.foot-in{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; max-width:1140px; margin:0 auto; padding:0 24px; }
.foot-meta{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.foot-terms{ font-size:11.5px; color:rgba(255,255,255,.28); text-decoration:none; letter-spacing:.04em; }
.foot-terms:hover{ color:rgba(255,255,255,.6); }

@media (max-width:760px){
  section{ padding:56px 0; }
  .cols2{ grid-template-columns:1fr; }
  .rel{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn,.rel a{ transition:none; }
}
