@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Revopic — landing estática.
   Los bloques marcados «DS» son copia literal del design system
   `revopic-design-system-9019f25b`. Si allí cambia un valor, cámbialo aquí.
   Solo se incluye el subconjunto de `rev-*` que usa esta landing.
   ========================================================================== */

/* ---- DS · tokens/colors.css --------------------------------------------- */
:root {
  --ink-900: #1D1D1B;   /* texto primario · 16,9:1 sobre blanco · tinta de marca */
  --ink-800: #2B2B28;
  --ink-700: #3E3E3A;
  --ink-600: #55554F;   /* texto secundario · 7,5:1 */
  --ink-500: #6E6E67;   /* meta y ayuda · 5,1:1 — mínimo para texto */
  --ink-400: #94948C;   /* 3,1:1 — NUNCA texto */
  --ink-300: #C6C6BF;
  --ink-200: #DEDEDA;
  --ink-100: #EDEDE9;
  --ink-050: #F6F6F3;
  --paper:   #FFFFFF;
  --paper-2: #FBFBFA;

  --green-050: #EAF6EF;
  --green-200: #C6E4D2;
  --green-500: #25A963;
  --green-600: #157F49;
  --green-700: #0F6238;

  --cyan-050: #E9F4FA;
  --cyan-200: #C6DFEC;
  --cyan-500: #42B3E7;
  --cyan-600: #1E86BB;
  --cyan-700: #14607F;

  --grad-brand: linear-gradient(135deg, #25A963 0%, #42B3E7 100%);
  --grad-filo:  linear-gradient(90deg, #25A963 0%, #42B3E7 100%);
  --grad-filo-v: linear-gradient(180deg, #25A963 0%, #42B3E7 100%);

  --ok-fg: #0F6238;  --ok-bg: #EAF6EF;  --ok-br: #C6E4D2;  --ok-dot: #157F49;
  --warn-fg: #8A5200; --warn-bg: #FBF3E4; --warn-br: #EBD9B4; --warn-dot: #C08000;
  --err-fg: #B22C24;  --err-bg: #FBEBE9;  --err-br: #F0CFCB;  --err-dot: #B22C24;
  --err-br-soft: #E4B8B4;
  --info-fg: #14607F; --info-bg: #E9F4FA; --info-br: #C6DFEC; --info-dot: #1E86BB;

  --dk-canvas:  #0C0C0B;
  --dk-surface: #171716;
  --dk-raised:  #212120;
  --dk-border:  #2E2E2C;
  --dk-border-2:#3A3A37;
  --dk-fg:      #F4F4F1;
  --dk-fg-muted:#A5A59D;
  --dk-tile:    repeating-linear-gradient(135deg, #232322 0 8px, #2B2B29 8px 16px);

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-500);
  --fg-disabled: var(--ink-400);
  --bg-canvas: var(--ink-050);
  --bg-surface: var(--paper);
  --bg-subtle: var(--paper-2);
  --border-subtle: var(--ink-200);
  --border-control: var(--ink-300);
  --link: var(--cyan-700);
  --link-hover: var(--ink-900);
}

[data-register="dark"] {
  --fg-1: var(--dk-fg);
  --fg-2: var(--dk-fg-muted);
  --fg-3: var(--dk-fg-muted);
  --bg-canvas: var(--dk-canvas);
  --bg-surface: var(--dk-surface);
  --bg-subtle: var(--dk-raised);
  --border-subtle: var(--dk-border);
  --border-control: var(--dk-border-2);
  --link: var(--cyan-500);
  --link-hover: var(--dk-fg);
  --shadow-e1: none;
  --shadow-e2: none;
}

/* ---- DS · tokens/typography.css ----------------------------------------- */
:root {
  --font-display: 'Sora', 'Trebuchet MS', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --t-display: 600 46px/1.04 var(--font-display);
  --t-h1: 600 30px/1.12 var(--font-display);
  --t-h2: 600 21px/1.2 var(--font-display);
  --t-lead: 400 16.5px/1.6 var(--font-body);

  --t-page: 600 26px/1.15 var(--font-display);
  --t-section: 600 17px/1.25 var(--font-display);
  --t-sh: 600 12px/1.3 var(--font-display);
  --t-ui: 400 14px/1.5 var(--font-body);
  --t-ui-md: 500 13.5px/1.45 var(--font-body);
  --t-th: 500 12.5px/1.4 var(--font-body);
  --t-meta: 400 12px/1.5 var(--font-body);
  --t-mono: 400 12px/1.4 var(--font-mono);
  --t-eyebrow: 600 11px/1.3 var(--font-display);

  --track-eyebrow: 0.16em;
  --track-sh: 0.10em;
  --track-display: -0.025em;
  --track-page: -0.02em;
}

/* ---- DS · tokens/spacing.css -------------------------------------------- */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-20: 80px;

  --h-control: 36px;
  --h-control-sm: 28px;
  --h-control-lg: 44px;
  --h-row: 44px;
  --w-rail: 240px;
  --w-content-max: 1280px;
}

/* ---- DS · tokens/radii.css ---------------------------------------------- */
:root {
  --radius-thumb: 4px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-photo: 16px;
  --radius-pill: 999px;
}

/* ---- DS · tokens/elevation.css ------------------------------------------ */
:root {
  --shadow-e1: 0 1px 2px rgba(29,29,27,.06), 0 2px 6px rgba(29,29,27,.05);
  --shadow-e2: 0 8px 24px rgba(29,29,27,.12), 0 2px 6px rgba(29,29,27,.06);
  --ring-focus: 0 0 0 3px rgba(66,179,231,.45);

  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms;
  --dur-med: 180ms;
  --dur-slow: 240ms;
  --stagger-photo: 30ms;
}

/* ---- DS · patterns/base.css --------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-canvas); color: var(--fg-1);
  font: var(--t-ui); -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
.rev-num { font-variant-numeric: tabular-nums; }
.rev-mono { font: var(--t-mono); }
.rev-eyebrow { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-3); }
.rev-hint { font: var(--t-meta); color: var(--fg-3); }

/* El filo — el único elemento decorativo del sistema. Una vez por bloque. */
.rev-filo { height: 3px; width: 40px; background: var(--grad-filo); border-radius: var(--radius-pill); }

/* ---- DS · patterns/rev-classes.css · subconjunto usado ------------------- */
.rev-btn {
  height: var(--h-control); padding: 0 16px; border-radius: var(--radius-control);
  font: var(--t-ui-md); display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rev-btn--primary { background: var(--ink-900); color: var(--paper); }
.rev-btn--primary:hover { background: var(--ink-800); }
.rev-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
[data-register="dark"] .rev-btn--primary { background: var(--dk-fg); color: var(--dk-canvas); }

.rev-chip {
  border-radius: var(--radius-pill); padding: 3px 10px; font: var(--t-meta); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-subtle);
  background: var(--ink-050); color: var(--fg-2);
}
.rev-chip__dot { width: 6px; height: 6px; border-radius: 50%; }
.rev-chip--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-br); }

/* Foto: la miniatura sin imagen enseña la trama del sistema. */
.rev-tile { border-radius: var(--radius-control); background: repeating-linear-gradient(135deg, #E4E4DF 0 8px, #EDEDE9 8px 16px); position: relative; }
[data-register="dark"] .rev-tile { background: var(--dk-tile); }

/* ==========================================================================
   Landing — estilos propios
   ========================================================================== */
body { background: var(--paper); }
img, svg { max-width: 100%; display: block; }
[data-register="dark"] a { color: var(--cyan-500); }

.rv-sec { padding-left: 80px; padding-right: 80px; }
.rv-h1 { font: 600 56px/1.04 var(--font-display); letter-spacing: -0.03em; margin: 0; text-wrap: pretty; }
.rv-h2 { font: 600 34px/1.12 var(--font-display); letter-spacing: -0.022em; margin: 0; text-wrap: pretty; }
.rv-h3 { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.rv-p { font-size: 15.5px; line-height: 1.62; color: var(--fg-2); margin: 0; text-wrap: pretty; }

/* Texto en degradado de marca */
.rv-grad { background-image: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.rv-grad--oscuro { background-image: linear-gradient(135deg, #0F6238 0%, #14607F 100%); }

/* Hueco de foto: sustituir el <div> por <img src="..." alt="..."> cuando
   haya material real. El alt vive ya en aria-label. */
.rv-slot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-400); }
[data-register="dark"] .rv-slot { color: var(--dk-fg-muted); }

/* Selector de idioma: dos enlaces reales, uno por página. */
.rv-lang { display: flex; border: 1px solid var(--dk-border-2); border-radius: var(--radius-control); overflow: hidden; }
.rv-lang a {
  height: 32px; padding: 0 11px; display: inline-flex; align-items: center;
  font: var(--t-mono); font-size: 12px; color: var(--dk-fg-muted); background: transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rv-lang a:hover { color: var(--dk-fg); }
.rv-lang a[aria-current="true"] { background: var(--dk-fg); color: var(--ink-900); }
.rv-lang a[aria-current="true"]:hover { color: var(--ink-900); }

/* Menú «Entrar»: <details> nativo, funciona sin JS. */
.rv-entrar { position: relative; }
.rv-entrar > summary { list-style: none; cursor: pointer; }
.rv-entrar > summary::-webkit-details-marker { display: none; }
.rv-entrar > summary::marker { content: ''; }
.rv-entrar > summary:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-control); }
.rv-entrar__panel {
  position: absolute; top: 46px; right: 0; z-index: 20; width: 290px;
  background: var(--dk-surface); border: 1px solid var(--dk-border-2);
  border-radius: var(--radius-card); padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.rv-entrar__item { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: var(--radius-control); color: var(--dk-fg); }
a.rv-entrar__item:hover { background: var(--dk-raised); color: var(--dk-fg); }
.rv-entrar__t { font: 600 13.5px/1.3 var(--font-display); color: var(--dk-fg); }
.rv-entrar__c { font-size: 12px; line-height: 1.45; color: var(--dk-fg-muted); }
.rv-store-sm { font-size: 11.5px; border: 1px solid var(--dk-border-2); border-radius: var(--radius-control); padding: 5px 10px; color: var(--dk-fg); }

/* Botones de tienda del hero */
.rv-store {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px;
  border-radius: 10px; border: 1px solid transparent;
}
.rv-store--solido { background: var(--dk-fg); }
.rv-store--linea { border-color: var(--dk-border-2); }
.rv-store--linea:hover { border-color: var(--dk-fg-muted); }

/* Estos enlaces llevan color propio, no el del sistema. Van calzados dentro
   del registro oscuro porque `[data-register="dark"] a` (0,1,1) le gana a una
   clase suelta (0,1,0) — en el diseño el color venía en un style inline. */
[data-register="dark"] a.rv-store--solido,
[data-register="dark"] a.rv-store--solido:hover { color: var(--ink-900); }
[data-register="dark"] a.rv-store--linea,
[data-register="dark"] a.rv-store--linea:hover,
[data-register="dark"] a.rv-store-sm,
[data-register="dark"] a.rv-store-sm:hover,
[data-register="dark"] a.rv-entrar__item,
[data-register="dark"] a.rv-entrar__item:hover { color: var(--dk-fg); }
[data-register="dark"] a.rv-store-sm:hover { border-color: var(--dk-fg-muted); }

@media (max-width: 1000px) {
  .rv-sec { padding-left: 32px; padding-right: 32px; }
  .rv-h1 { font-size: 40px; letter-spacing: -0.024em; }
  .rv-h2 { font-size: 27px; }
  .rv-split { grid-template-columns: 1fr !important; }
  .rv-3 { grid-template-columns: 1fr !important; }
  .rv-hero { flex-direction: column !important; gap: 40px !important; }
  .rv-hero-art { width: 100% !important; }
  .rv-nav-links { display: none !important; }
}
@media (max-width: 620px) {
  .rv-sec { padding-left: 20px; padding-right: 20px; }
  .rv-h1 { font-size: 33px; }
  .rv-cta-row { flex-direction: column !important; align-items: stretch !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}