/* Showroom de demos · estética ERMA LAB: pino grafito profundo, un único acento lima,
   titulares en Hanken Grotesk con una palabra en cursiva Bodoni, etiquetas en Geist Mono. */
:root {
  color-scheme: dark;
  --canvas: #0b1411; --surface-1: #111d19; --surface-2: #16241f; --surface-3: #1c2c26;
  --hairline: #21342d; --hairline-strong: #2e463d;
  --ink: #eef3ee; --ink-muted: #b4c2ba; --ink-subtle: #8a9c93;
  --lime: #d6ff3d; --lime-hover: #e4ff7a; --lime-glow: rgb(214 255 61 / 0.35); --on-lime: #0b1411;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --serif: "Bodoni Moda", "Bodoni 72", serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 3.9vw, 56px);
  --max: 1360px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--ink); background:
  radial-gradient(900px 520px at 85% -10%, rgb(158 227 74 / 0.10), transparent 70%), var(--canvas);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2 { margin: 0; font-weight: 600; letter-spacing: -0.035em; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--lime); }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }
::selection { background: var(--lime); color: var(--on-lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--lime); color: var(--on-lime); padding: 10px 14px; border-radius: 8px; z-index: 50; text-decoration: none; }
.skip:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 10px; background: var(--lime); color: var(--on-lime); font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 30px -12px var(--lime-glow); transition: background .2s, box-shadow .2s, transform .15s; }
.btn:hover { background: var(--lime-hover); box-shadow: 0 14px 36px -12px var(--lime-glow); }
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { padding: 9px 14px; font-size: 0.875rem; box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn--ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--lime); }

/* ─── cabecera ─── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; max-width: none; height: 68px; padding: 0 var(--gutter); background: rgb(11 20 17 / 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.logo span { font: 800 17px/1 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -0.02em; }
.logo small { color: var(--ink-subtle); }
.top__links { display: flex; gap: 26px; margin-left: auto; }
.top__links a, .top__back { color: var(--ink-muted); text-decoration: none; font-size: 0.875rem; transition: color .2s; }
.top__links a:hover, .top__back:hover { color: var(--ink); }

/* ─── portada ─── */
.hero { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter) clamp(40px, 5vw, 72px); }
.kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-muted); border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 6px 12px 6px 10px; margin: 0; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.08em; }
.kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.hero h1 { margin-top: 28px; font-size: clamp(3rem, 1.6rem + 4.6vw, 6rem); line-height: 0.98; max-width: 12ch; }
.hero__sub { margin: 24px 0 0; font-size: 1.125rem; color: var(--ink-muted); max-width: 38em; }
.hero__note { margin: 18px 0 0; color: var(--ink-subtle); font-size: 0.75rem; }
.hero__note::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--lime); vertical-align: middle; margin-right: 10px; }

/* ─── sectores ─── */
.sector { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--gutter); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; border-top: 1px solid var(--hairline); }
.sector--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
.sector--flip .sector__info { order: 2; }
.sector__n { margin: 0; color: var(--lime); text-transform: uppercase; letter-spacing: 0.08em; }
.sector h2 { margin-top: 14px; font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem); line-height: 1.04; }
.sector__app { margin: 12px 0 0; color: var(--ink-subtle); }
.sector__txt { margin: 18px 0 0; color: var(--ink-muted); font-size: 1.0625rem; max-width: 36em; }
.sector__vars { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.sector__vars .mono { color: var(--ink-subtle); margin-right: 4px; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.08em; }
.sector__vars a { font-size: 0.875rem; text-decoration: none; color: var(--ink-muted); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hairline-strong); transition: color .2s, border-color .2s; }
.sector__vars a:hover { color: var(--ink); border-color: var(--lime); }
.sector__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* vista previa: la ventana del panel y, delante, el móvil del cliente */
.preview { position: relative; display: block; padding: 0 9% 9% 0; text-decoration: none; }
.preview__win { display: block; border-radius: 12px; overflow: hidden; background: var(--surface-1); border: 1px solid var(--hairline-strong); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(214 255 61 / 0); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.preview__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.preview__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); }
.preview__bar b { margin-left: auto; color: var(--ink-subtle); font-weight: 400; font-size: 0.6875rem; }
.preview img { display: block; width: 100%; height: auto; }
.preview__phone { position: absolute; right: 0; bottom: 0; width: 25%; min-width: 120px; border-radius: 22px; overflow: hidden; border: 6px solid #050a08; background: #050a08; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.75); transition: transform .6s var(--ease); }
.preview:hover .preview__win { transform: translateY(-4px); box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(214 255 61 / 0.35); }
.preview:hover .preview__phone { transform: translateY(-10px) rotate(-1.5deg); }
.sector--flip .preview { padding: 0 0 9% 9%; }
.sector--flip .preview__phone { right: auto; left: 0; }
.sector--flip .preview:hover .preview__phone { transform: translateY(-10px) rotate(1.5deg); }

/* ─── cierre y pie ─── */
.cierre { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--gutter); border-top: 1px solid var(--hairline); text-align: center; }
.cierre h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1.05; max-width: 18ch; margin: 0 auto; }
.cierre p { margin: 18px auto 30px; color: var(--ink-muted); max-width: 36em; font-size: 1.0625rem; }
.pie { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding: 28px var(--gutter); border-top: 1px solid var(--hairline); color: var(--ink-subtle); font-size: 0.875rem; }
.pie span { margin-right: auto; }
.pie a { color: var(--ink-muted); text-decoration: none; }
.pie a:hover { color: var(--lime); }

/* ─── aparición al llegar ─── */
.js-reveal [data-reveal] .sector__info, .js-reveal [data-reveal] .preview { opacity: 0; transform: translateY(26px); }
.js-reveal [data-reveal] .preview { transition-delay: .12s; }
.js-reveal [data-reveal].is-in .sector__info, .js-reveal [data-reveal].is-in .preview { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js-reveal [data-reveal].is-in .preview { transition-delay: .12s; }

@media (max-width: 960px) {
  .top { gap: 16px; }
  .top__links { display: none; }
  .top__back { margin-left: auto; }
  .sector, .sector--flip { grid-template-columns: minmax(0, 1fr); }
  .sector--flip .sector__info { order: 0; }
}
@media (max-width: 600px) {
  .top { height: 60px; }
  .top__back { display: none; }
  .top .btn { margin-left: auto; }
  .logo small { display: none; }
  .preview__phone { min-width: 0; width: 30%; border-width: 4px; border-radius: 16px; }
  .sector__cta .btn { flex: 1 1 auto; justify-content: center; }
  .pie span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}