/* ==========================================================================
   RGM Digital — Rolando Javier González Moreno · Servicios digitales
   Diseño editorial oscuro estilo Awwwards · HTML/CSS/JS puro
   ========================================================================== */

:root {
  --bg:        #0a0a0b;   /* casi negro */
  --bg-2:      #101012;
  --surface:   #141417;
  --line:      #26262b;
  --text:      #f4f1ea;   /* off-white cálido */
  --muted:     #9a9aa2;
  --dim:       #6b6b73;
  --accent:    #c6ff3a;   /* lima ácido — acento de marca */
  --accent-2:  #7cf5e6;   /* teal secundario */
  --accent-ink:#0a0a0b;
  --maxw:      1280px;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* Modo claro opcional para páginas legales / accesibilidad del sistema */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f4f1ea; --bg-2:#eceae2; --surface:#ffffff; --line:#dcd8cd;
    --text:#0a0a0b; --muted:#55555c; --dim:#8a8a90; --accent-ink:#0a0a0b;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body); line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Grano/textura sutil sobre todo el sitio */
body::after {
  content:""; position: fixed; inset:0; z-index: 9999; pointer-events:none; opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* ---- Reveal on scroll (solo se oculta si el JS está activo) ---- */
html.js .reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1 !important; transform:none !important; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  html { scroll-behavior:auto; }
  .marquee__inner { animation: none !important; }
}

/* ====================== Nav ====================== */
.nav {
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px clamp(20px,5vw,56px);
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav__brand { font-family: var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.nav__brand .mark {
  width:34px; height:34px; border-radius:9px; background: var(--accent); color: var(--accent-ink);
  display:grid; place-items:center; font-weight:700; font-size:.95rem; letter-spacing:-.04em;
}
.nav__links { display:flex; gap: clamp(18px,3vw,40px); align-items:center; font-family:var(--sans); font-size:.92rem; }
.nav__links a { color: var(--muted); transition: color .2s; position:relative; }
.nav__links a:hover { color: var(--text); }
.nav__cta {
  padding:10px 20px; border:1px solid var(--text); border-radius:999px; color:var(--text) !important;
  font-weight:600; transition:.2s var(--ease);
}
.nav__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) !important; }
.nav__burger { display:none; background:none; border:0; cursor:pointer; padding:6px; z-index:101; }
.nav__burger span { display:block; width:26px; height:2px; background:var(--text); margin:6px 0; transition:.3s var(--ease); }

/* ====================== Hero ====================== */
.hero { position:relative; min-height: 100vh; display:flex; flex-direction:column; justify-content:center; padding: 140px 0 60px; }
.hero__glow {
  position:absolute; z-index:-1; width:60vw; height:60vw; max-width:800px; max-height:800px;
  top:-10%; right:-10%; border-radius:50%; filter: blur(90px); opacity:.22;
  background: radial-gradient(circle, var(--accent), transparent 62%);
}
.hero__glow.two { top:auto; bottom:-20%; right:auto; left:-15%; background: radial-gradient(circle, var(--accent-2), transparent 62%); opacity:.16; }
.hero__eyebrow { font-family:var(--sans); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.hero__eyebrow::before { content:""; width:40px; height:1px; background:var(--accent); }
.hero__title {
  font-family: var(--sans); font-weight:600; letter-spacing:-.035em; line-height:.94;
  font-size: clamp(2.9rem, 9.5vw, 8.4rem); margin:0; text-transform:none;
}
.hero__title .it { font-family: var(--serif); font-weight:400; font-style: italic; letter-spacing:-.01em; }
.hero__title .out {
  -webkit-text-stroke: 1.5px var(--text); color: transparent;
}
.hero__title .ac { color: var(--accent); }
.hero__row { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:48px; flex-wrap:wrap; }
.hero__lead { max-width: 46ch; color: var(--muted); font-size: clamp(1.05rem,1.6vw,1.3rem); }
.hero__lead strong { color: var(--text); font-weight:600; }
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:1rem; padding:15px 28px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:.22s var(--ease); }
.btn--fill { background: var(--accent); color: var(--accent-ink); }
.btn--fill:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn--out { border-color: var(--line); color: var(--text); }
.btn--out:hover { border-color: var(--text); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* ====================== Marquee ====================== */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; white-space:nowrap; background: var(--bg-2); }
.marquee__inner { display:inline-flex; gap:0; animation: scrollx 32s linear infinite; }
.marquee__inner span { font-family:var(--sans); font-weight:500; font-size: clamp(1.2rem,2.6vw,2rem); letter-spacing:-.02em; padding:0 32px; display:inline-flex; align-items:center; gap:32px; color:var(--text); }
.marquee__inner span::after { content:"✦"; color: var(--accent); font-size:.7em; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ====================== Secciones ====================== */
.section { padding: clamp(80px,12vw,150px) 0; }
.section--alt { background: var(--bg-2); }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom: 64px; }
.head__k { font-family:var(--sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.head h2 { font-family:var(--sans); font-weight:600; letter-spacing:-.03em; line-height:1; font-size: clamp(2rem,5vw,4rem); margin:.4em 0 0; max-width: 16ch; }
.head p { color:var(--muted); max-width: 40ch; font-size:1.05rem; }

/* Servicios — lista editorial numerada */
.svc { border-top:1px solid var(--line); }
.svc__item {
  display:grid; grid-template-columns: 90px 1fr auto; gap: clamp(16px,4vw,60px); align-items:center;
  padding: clamp(24px,4vw,42px) 0; border-bottom:1px solid var(--line);
  transition: padding-left .35s var(--ease), background .35s var(--ease); cursor: default;
}
.svc__item:hover { padding-left: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); }
.svc__num { font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--dim); transition:color .3s; }
.svc__item:hover .svc__num { color: var(--accent); }
.svc__body h3 { font-family:var(--sans); font-weight:500; font-size: clamp(1.4rem,3vw,2.4rem); letter-spacing:-.02em; margin:0 0 6px; line-height:1.05; }
.svc__body p { color:var(--muted); margin:0; max-width: 60ch; font-size:1rem; }
.svc__arrow { color: var(--dim); transition: transform .3s var(--ease), color .3s; }
.svc__item:hover .svc__arrow { color: var(--accent); transform: translate(6px,-6px); }

/* Proceso */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,32px); }
.step { border-top:2px solid var(--accent); padding-top:22px; }
.step__n { font-family:var(--serif); font-style:italic; font-size:2.6rem; line-height:1; color:var(--text); }
.step h3 { font-family:var(--sans); font-weight:500; font-size:1.25rem; margin:14px 0 8px; letter-spacing:-.01em; }
.step p { color:var(--muted); font-size:.95rem; margin:0; }

/* Sobre mí */
.about { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,6vw,90px); align-items:center; }
.about__lead { font-family:var(--sans); font-weight:400; font-size: clamp(1.5rem,3vw,2.4rem); line-height:1.25; letter-spacing:-.02em; margin:0 0 24px; }
.about__lead em { font-family:var(--serif); font-style:italic; color:var(--accent); }
.about p { color:var(--muted); font-size:1.05rem; }
.about__list { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:16px; }
.about__list li { display:flex; gap:14px; align-items:flex-start; color:var(--text); font-size:1.02rem; }
.about__list svg { color:var(--accent); flex:none; margin-top:4px; }
.about__stats { display:grid; gap:2px; background: var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.about__stats div { background: var(--surface); padding: 30px 28px; }
.about__stats .big { font-family:var(--sans); font-weight:600; font-size: clamp(2.4rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1; }
.about__stats .big .ac { color: var(--accent); }
.about__stats span { color:var(--muted); font-size:.92rem; }

/* CTA */
.cta { text-align:center; }
.cta h2 { font-family:var(--sans); font-weight:600; letter-spacing:-.035em; line-height:.98; font-size: clamp(2.4rem,8vw,6.5rem); margin:0; }
.cta h2 .it { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); }
.cta p { color:var(--muted); font-size:1.15rem; margin:26px auto 34px; max-width: 44ch; }

/* Contacto */
.contact { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); align-items:start; }
.contact__list { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.contact__list li a, .contact__list li div {
  display:flex; align-items:center; gap:18px; padding:22px 4px; border-bottom:1px solid var(--line);
  transition: padding-left .3s var(--ease), color .3s;
}
.contact__list li a:hover { padding-left:14px; color: var(--accent); }
.contact__list .lbl { font-family:var(--sans); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); width:110px; flex:none; }
.contact__list .val { font-family:var(--sans); font-size: clamp(1.1rem,2vw,1.5rem); font-weight:500; letter-spacing:-.01em; }

.form { background: var(--surface); border:1px solid var(--line); border-radius:20px; padding: clamp(24px,3vw,36px); }
.form .field { margin-bottom:18px; }
.form label { display:block; font-family:var(--sans); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.form input, .form textarea, .form select {
  width:100%; padding:14px 16px; background: var(--bg); border:1px solid var(--line); border-radius:12px;
  color: var(--text); font-family:inherit; font-size:1rem; transition:.18s;
}
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form textarea { min-height:130px; resize:vertical; }
.form .btn--fill { width:100%; justify-content:center; }
.form .note { font-size:.82rem; color:var(--dim); margin:14px 0 0; }

/* ====================== Footer ====================== */
.footer { border-top:1px solid var(--line); padding: 80px 0 34px; }
.footer__big { font-family:var(--sans); font-weight:600; letter-spacing:-.04em; line-height:.9; font-size: clamp(3rem,14vw,11rem); margin:0 0 50px; color:var(--text); }
.footer__big .out { -webkit-text-stroke:1.5px var(--muted); color:transparent; }
.footer__grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.footer__grid p { color:var(--muted); max-width:36ch; font-size:.95rem; }
.footer__col h4 { font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 16px; }
.footer__col a, .footer__col span { display:block; color:var(--muted); font-size:.95rem; margin-bottom:11px; transition:color .2s; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { padding-top:26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:.85rem; font-family:var(--sans); }

/* ====================== Páginas legales ====================== */
.legal { padding: 150px 0 100px; }
.legal .wrap { max-width: 820px; }
.legal .back { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); color:var(--muted); margin-bottom:40px; }
.legal .back:hover { color: var(--accent); }
.legal h1 { font-family:var(--sans); font-weight:600; letter-spacing:-.03em; font-size: clamp(2.2rem,5vw,3.4rem); margin:0 0 10px; }
.legal .updated { color:var(--dim); font-family:var(--sans); font-size:.9rem; margin:0 0 46px; }
.legal h2 { font-family:var(--sans); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; margin:44px 0 14px; }
.legal p, .legal li { color: var(--muted); font-size:1.02rem; }
.legal strong { color: var(--text); }
.legal ul { padding-left:22px; }
.legal .box { background: var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px 28px; margin:24px 0; }
.legal .box p { margin:6px 0; }

/* ====================== Responsive ====================== */
@media (max-width: 980px) {
  .about { grid-template-columns:1fr; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .contact { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__links {
    position: fixed; inset:0 0 0 auto; width: min(78vw,340px); background: var(--bg-2);
    flex-direction:column; justify-content:center; align-items:flex-start; gap:26px;
    padding:0 40px; transform: translateX(100%); transition: transform .4s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav__links.open { transform:none; }
  .nav__links a { font-size:1.3rem; }
  .nav__burger { display:block; }
  .nav__burger.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
  .svc__item { grid-template-columns: 50px 1fr; }
  .svc__arrow { display:none; }
  .steps { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; }
  .hero__row { flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Award polish — preloader, cursor, revelado por líneas, magnético
   ========================================================================== */

/* Si el JS falla o está desactivado, nada se oculta */
html.no-js #preloader { display: none; }

/* ---- Preloader ---- */
#preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: grid; place-items: center; overflow: hidden;
}
#preloader .pl-brand {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.04em;
  font-size: clamp(2.2rem, 8vw, 5rem); color: var(--text);
  display: flex; align-items: baseline; gap: .3em; opacity: 0;
}
#preloader .pl-brand .dot { color: var(--accent); }
#preloader .pl-count {
  position: absolute; bottom: clamp(20px,5vw,48px); right: clamp(20px,5vw,56px);
  font-family: var(--sans); font-size: clamp(2rem,6vw,4rem); font-weight: 600;
  color: var(--dim); letter-spacing: -.03em;
}
#preloader .pl-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0%;
  background: var(--accent);
}
body.loaded #preloader { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }

/* ---- Cursor personalizado (solo ratón fino) ---- */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.cursor-ready, html.cursor-ready a, html.cursor-ready button,
  html.cursor-ready .svc__item, html.cursor-ready input, html.cursor-ready textarea, html.cursor-ready select { cursor: none; }
  html.cursor-ready input, html.cursor-ready textarea, html.cursor-ready select { cursor: text; }
  .cursor {
    display: block; position: fixed; top: 0; left: 0; width: 40px; height: 40px;
    border: 1px solid var(--accent); border-radius: 50%; pointer-events: none;
    z-index: 9998; transform: translate(-50%, -50%);
    transition: width .28s var(--ease), height .28s var(--ease), background .28s var(--ease), opacity .3s;
    will-change: transform;
  }
  .cursor-dot {
    display: block; position: fixed; top: 0; left: 0; width: 6px; height: 6px;
    background: var(--accent); border-radius: 50%; pointer-events: none;
    z-index: 9999; transform: translate(-50%, -50%); will-change: transform;
  }
  .cursor.is-hover { width: 74px; height: 74px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .cursor.is-hidden, .cursor-dot.is-hidden { opacity: 0; }
}

/* ---- Botones magnéticos ---- */
.btn, .nav__cta { will-change: transform; }

/* ---- Hero: revelado por líneas enmascaradas ---- */
.hero__title .line { display: block; overflow: hidden; padding-bottom: .05em; }
.hero__title .line__in { display: block; }

/* ---- Parallax helpers ---- */
.footer__big { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
  body { overflow: auto !important; }
}