/* ============================================================
   JR MOTTA · DESIGN SYSTEM v2.0
   Dirección Visual C — Geometric Gold
   Juan Rodrigo Motta Molina · jrmotta@outlook.com
   Tagline: Consultor Senior en TI · Docente Universitario
            · Ciberseguridad · CCNA · CyberOps
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── TOKENS ── */
:root {
  /* Paleta principal */
  --jrm-forest:        #1A3C18;
  --jrm-forest-mid:    #2C5F28;
  --jrm-forest-dark:   #071007;
  --jrm-primary:       #3A7D35;
  --jrm-primary-mid:   #4A9040;
  --jrm-primary-light: #5AA852;
  --jrm-primary-bright:#6BBD5A;
  --jrm-mist:          #EAF3DE;
  --jrm-cream:         #F5F3EE;

  /* Dorado */
  --jrm-gold:          #C4973A;
  --jrm-gold-light:    #E8C06A;
  --jrm-gold-pale:     #FBF0D8;
  --jrm-gold-pin:      #9A7024;

  /* Texto */
  --jrm-text:          #1A2419;
  --jrm-text-sec:      #4A5E4B;
  --jrm-text-muted:    #7A9A7C;
  --jrm-white:         #FFFFFF;

  /* Sobre fondos oscuros */
  --jrm-on-dark:       rgba(255,255,255,0.92);
  --jrm-on-dark-mid:   rgba(255,255,255,0.55);
  --jrm-on-dark-faint: rgba(255,255,255,0.25);
  --jrm-rule-dark:     rgba(255,255,255,0.09);

  /* Superficies y texto que cambian entre modo claro/oscuro
     (independientes de --jrm-white / --jrm-forest, que se usan también
     como fondo/texto fijos de las secciones ya oscuras del sitio) */
  --jrm-surface:       var(--jrm-white);
  --jrm-ink:            var(--jrm-forest);
  --jrm-border:         rgba(58,125,53,0.14);

  /* Dirección C — elementos geométricos */
  --jrm-geo-sq1:       #C4973A;   /* cuadrado exterior del mark */
  --jrm-geo-sq2:       #5AA852;   /* cuadrado interior del mark */
  --jrm-geo-dot:       #E8C06A;   /* punto del mark */

  /* Tipografía */
  --font-heading:      'Lora', Georgia, serif;
  --font-body:         'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', Consolas, monospace;

  /* Escala */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

  /* Espaciado */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;

  /* Radios */
  --radius-sm: 4px;  --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(26,60,24,0.08);
  --shadow-md: 0 4px 16px rgba(26,60,24,0.10);
  --shadow-lg: 0 10px 32px rgba(26,60,24,0.12);

  --transition: 200ms ease;
}

/* ── MODO OSCURO ──
   Solo redefine los tokens "swappables" (superficies, texto, bordes, sombras).
   Verde bosque y dorado se mantienen como acento en ambos modos. */
[data-theme="dark"] {
  --jrm-cream:   #12160F;
  --jrm-mist:    #1B2216;
  --jrm-surface: #1C2417;
  --jrm-ink:     #EDEEE6;
  --jrm-text:    #DCE3D6;
  --jrm-text-sec:   #A9BCA0;
  --jrm-text-muted: #8FAE8A;
  --jrm-border:  rgba(255,255,255,0.10);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.5);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--jrm-text);
  background: var(--jrm-cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  margin: 0; padding: 0;
  transition: background-color .25s ease, color .25s ease;
}

/* ── TIPOGRAFÍA ── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--jrm-ink);
  line-height: 1.2; font-weight: 600; margin: 0 0 .5em;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
p  { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jrm-gold-light); display: block; margin-bottom: var(--space-2);
}
.eyebrow--green { color: var(--jrm-primary); }

code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--jrm-mist); color: var(--jrm-ink); padding: .1em .4em; border-radius: var(--radius-sm); }
pre {
  background: var(--jrm-forest); color: #9FE1CB;
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
  overflow-x: auto; line-height: 1.8; margin: 0 0 var(--space-6);
}
pre code { background: none; color: inherit; padding: 0; }

/* ── LAYOUT ── */
.container       { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
.container--sm   { max-width: 760px; }
.container--wide { max-width: 1300px; }
.grid   { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
}

/* ── NAVEGACIÓN ── */
.nav {
  background: var(--jrm-forest); padding: 14px var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.nav__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.nav__logo  { width: 34px; height: 34px; }
.nav__name  { font-size: var(--text-lg); font-weight: 700; color: var(--jrm-white); line-height: 1; }
.nav__sub   { font-size: var(--text-xs); color: var(--jrm-on-dark-mid); letter-spacing: .1em; text-transform: uppercase; }
.nav__links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav__link  { font-size: var(--text-sm); font-weight: 500; color: var(--jrm-on-dark-mid); text-decoration: none; transition: color var(--transition); }
.nav__link:hover,.nav__link--active { color: var(--jrm-white); }
.nav__cta   { color: var(--jrm-gold-light) !important; font-weight: 700; }
.nav__right { display: flex; align-items: center; gap: var(--space-6); }

/* ── TOGGLE DARK/LIGHT ── */
.theme-toggle {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-full); color: var(--jrm-on-dark-mid);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.theme-toggle:hover { background: rgba(255,255,255,0.16); transform: rotate(15deg); }

/* ── HERO (Dirección C) ── */
.hero {
  background: var(--jrm-forest);
  padding: var(--space-16) var(--space-6);
  display: grid; grid-template-columns: 1fr 200px;
  gap: var(--space-8); align-items: center;
  position: relative; overflow: hidden;
}
/* Decorativos geométricos */
.hero::before {
  content: ''; position: absolute; top: -40px; right: 60px;
  width: 130px; height: 130px;
  border: 20px solid rgba(196,151,58,0.07); border-radius: 7px;
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -20px; right: 16px;
  width: 72px; height: 72px;
  border: 10px solid rgba(90,168,82,0.07); border-radius: 4px;
  pointer-events: none;
}
.hero__content { position: relative; z-index: 2; }
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--jrm-white); font-weight: 600;
  line-height: 1.15; margin-bottom: var(--space-3);
}
.hero__tagline {
  font-size: var(--text-sm); color: var(--jrm-on-dark-mid);
  letter-spacing: .04em; margin-bottom: var(--space-8);
}
.hero__tagline-sep { color: var(--jrm-gold); margin: 0 .35em; }
.hero__stats {
  display: flex; gap: var(--space-8); margin-top: var(--space-10);
  padding-top: var(--space-6); border-top: 1px solid var(--jrm-rule-dark);
}
.stat__num { font-family: var(--font-heading); font-size: 2rem; color: var(--jrm-white); line-height: 1; }
.stat__label { font-size: var(--text-xs); color: var(--jrm-on-dark-mid); margin-top: var(--space-1); letter-spacing: .05em; }

/* Right panel — certs */
.hero__right {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4); position: relative; z-index: 2;
}
.cert-pill {
  width: 100%; font-size: .6875rem; font-weight: 500; text-align: center;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid rgba(196,151,58,0.3); color: var(--jrm-gold-light);
  letter-spacing: .04em; background: rgba(196,151,58,0.06);
}

/* Geometric mark (complemento del logo dirección C) */
.geo-mark { position: relative; flex-shrink: 0; }
.geo-mark__sq1 {
  position: absolute; top: 0; left: 0;
  border: 2.5px solid var(--jrm-gold); border-radius: 4px;
}
.geo-mark__sq2 {
  position: absolute; bottom: 0; right: 0;
  border: 2px solid var(--jrm-primary-light); border-radius: 2px;
}
.geo-mark__dot {
  position: absolute; border-radius: 50%; background: var(--jrm-gold-light);
}

/* ── CERT STRIP ── */
.cert-strip {
  background: var(--jrm-forest-mid); padding: 11px var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
  border-top: 1px solid var(--jrm-rule-dark); flex-wrap: wrap;
}
.cert-strip__label { font-size: .6875rem; font-weight: 700; color: var(--jrm-on-dark-mid); letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; }
.cert-strip__chip  { font-size: .6875rem; font-weight: 500; padding: 2px 9px; border-radius: 3px; background: rgba(90,168,82,0.15); color: #9FE1CB; letter-spacing: .04em; }

/* ── SECCIONES ── */
.section        { padding: var(--space-16) var(--space-6); transition: background-color .3s ease; }
.section--dark  { background: var(--jrm-forest); }
.section--mist  { background: var(--jrm-mist); }
.section--white { background: var(--jrm-surface); }
.section--cream { background: var(--jrm-cream); }
.section__tag   { font-size: var(--text-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--jrm-primary); margin-bottom: var(--space-1); }
.section--dark .section__tag { color: var(--jrm-gold-light); }
.section__title { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--jrm-ink); margin-bottom: var(--space-2); }
.section--dark .section__title { color: var(--jrm-white); }
.section__sub   { font-size: var(--text-lg); color: var(--jrm-text-sec); max-width: 560px; }
.section--dark .section__sub  { color: var(--jrm-on-dark-mid); }

/* ── CARDS ── */
.card {
  background: var(--jrm-surface); border: 0.5px solid var(--jrm-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background-color .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card--top-green  { border-top: 2px solid var(--jrm-primary); }
.card--top-gold   { border-top: 2px solid var(--jrm-gold); }
.card--dark { background: var(--jrm-forest); border-color: transparent; }
.card--mist { background: var(--jrm-mist); }
.card__icon { font-size: 20px; color: var(--jrm-primary); margin-bottom: var(--space-4); }
.card--top-gold .card__icon { color: var(--jrm-gold); }
.card__title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--jrm-ink); margin-bottom: var(--space-2); }
.card--dark .card__title { color: var(--jrm-white); }
.card__text { font-size: var(--text-sm); color: var(--jrm-text-sec); line-height: 1.7; }
.card--dark .card__text { color: var(--jrm-on-dark-mid); }

/* Cert card (sobre fondo oscuro) */
.cert-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  transition: background var(--transition);
}
.cert-card:hover { background: rgba(255,255,255,0.08); }
.cert-card__badge {
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--jrm-gold-light); padding: 2px 9px;
  border: 1px solid rgba(196,151,58,0.4); border-radius: var(--radius-full);
  display: inline-block; margin-bottom: var(--space-2);
}
.cert-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--jrm-white); }
.cert-card__sub  { font-size: var(--text-xs); color: var(--jrm-on-dark-mid); margin-top: 2px; }

/* ── BOTONES ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: all var(--transition); line-height: 1;
}
.btn--gold   { background: var(--jrm-gold); color: var(--jrm-forest); border-color: var(--jrm-gold); }
.btn--gold:hover { background: var(--jrm-gold-light); border-color: var(--jrm-gold-light); }
.btn--ghost  { background: transparent; color: var(--jrm-white); border-color: var(--jrm-on-dark-faint); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--jrm-white); }
.btn--green  { background: var(--jrm-primary); color: var(--jrm-white); border-color: var(--jrm-primary); }
.btn--green:hover { background: var(--jrm-forest); }
.btn--outline { background: transparent; color: var(--jrm-primary); border-color: var(--jrm-primary); }
.btn--outline:hover { background: var(--jrm-mist); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: .625rem; }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-sm); }

/* ── CÓDIGO ── */
.code-block { background: var(--jrm-forest); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-5) 0; }
.code-block__header {
  background: rgba(255,255,255,0.05); padding: var(--space-2) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.code-block__lang { font-size: .625rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--jrm-gold-light); }
.code-block__copy { font-size: .6875rem; color: var(--jrm-on-dark-faint); background: none; border: none; cursor: pointer; font-family: var(--font-body); transition: color var(--transition); }
.code-block__copy:hover { color: var(--jrm-on-dark-mid); }
.code-block__body { padding: var(--space-5) var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); color: #C8E6C9; line-height: 1.9; overflow-x: auto; }
.tok-kw  { color: #EF9F27; }
.tok-str { color: #9FE1CB; }
.tok-cm  { color: rgba(255,255,255,0.28); font-style: italic; }
.tok-fn  { color: #81D4FA; }
.tok-num { color: #FFB3B3; }

/* ── CALLOUTS ── */
.callout { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border-left: 4px solid; margin: var(--space-5) 0; font-size: var(--text-sm); line-height: 1.7; }
.callout--info    { background: #e3f0fa; border-color: #1A6B9C; color: #0f4c78; }
.callout--success { background: var(--jrm-mist); border-color: var(--jrm-primary); color: var(--jrm-ink); }
.callout--warning { background: var(--jrm-gold-pale); border-color: var(--jrm-gold); color: #6B4A10; }
.callout--tip     { background: #f0eafe; border-color: #7c5cbf; color: #4b2e9e; }
.callout__title   { font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-1); }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.badge--green { background: var(--jrm-mist);     color: var(--jrm-ink); }
.badge--gold  { background: var(--jrm-gold-pale); color: #7A5A1A; }
.badge--dark  { background: var(--jrm-forest);    color: var(--jrm-white); }
.badge--blue  { background: #e3f0fa;               color: #0f4c78; }

/* ── TABLAS ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th { background: var(--jrm-forest); color: var(--jrm-white); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: var(--space-3) var(--space-5); text-align: left; }
tbody td { padding: var(--space-3) var(--space-5); border-bottom: 1px solid rgba(58,125,53,0.08); color: var(--jrm-text-sec); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--jrm-mist); }

/* ── FOOTER ── */
.footer { background: var(--jrm-forest); color: var(--jrm-on-dark-mid); padding: var(--space-12) var(--space-6) var(--space-6); }
.footer__brand { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--jrm-white); margin-bottom: var(--space-2); }
.footer__tagline { font-size: var(--text-sm); line-height: 1.7; max-width: 300px; margin-bottom: var(--space-6); }
.footer__head { font-size: var(--text-xs); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--jrm-on-dark-faint); margin-bottom: var(--space-3); }
.footer__links { list-style: none; }
.footer__links li { margin-bottom: var(--space-2); }
.footer__links a { font-size: var(--text-sm); color: var(--jrm-on-dark-mid); text-decoration: none; transition: color var(--transition); }
.footer__links a:hover { color: var(--jrm-white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-5); display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--jrm-on-dark-faint); }

/* ── PRINT ── */
@media print {
  body { background: white; }
  .nav, .footer { display: none; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .hero { grid-template-columns: 1fr; padding: var(--space-10) var(--space-4); }
  .hero__right { display: none; }
  .nav__links { display: none; }
  .section { padding: var(--space-10) var(--space-4); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); }
}

/*
  ╔══════════════════════════════════════════════╗
  ║  REFERENCIA RÁPIDA DE TOKENS                 ║
  ║  --jrm-forest:        #1A3C18               ║
  ║  --jrm-forest-mid:    #2C5F28               ║
  ║  --jrm-primary:       #3A7D35               ║
  ║  --jrm-primary-light: #5AA852               ║
  ║  --jrm-gold:          #C4973A               ║
  ║  --jrm-gold-light:    #E8C06A               ║
  ║  --jrm-mist:          #EAF3DE               ║
  ║  --jrm-cream:         #F5F3EE               ║
  ║  --font-heading:      'Lora', serif         ║
  ║  --font-body:         'Plus Jakarta Sans'   ║
  ║  --font-mono:         'JetBrains Mono'      ║
  ╚══════════════════════════════════════════════╝
*/


    /* ── PAGE SPECIFIC ── */
    html { scroll-behavior: smooth; }

    .hero {
      background: var(--jrm-forest);
      padding: var(--space-16) var(--space-6);
      display: grid;
      grid-template-columns: 1fr 210px;
      gap: var(--space-8);
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; top: -40px; right: 60px;
      width: 130px; height: 130px;
      border: 20px solid rgba(196,151,58,0.07); border-radius: 7px;
    }
    .hero::after {
      content: ''; position: absolute; bottom: -20px; right: 16px;
      width: 72px; height: 72px;
      border: 10px solid rgba(90,168,82,0.07); border-radius: 4px;
    }
    .hero__content { position: relative; z-index: 2; }
    .hero__title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 4vw, 3.2rem);
      color: var(--jrm-white); font-weight: 600;
      line-height: 1.15; margin-bottom: var(--space-3);
    }
    .tagline-row {
      display: flex; gap: .35em; align-items: center;
      flex-wrap: wrap; margin-bottom: var(--space-8);
    }
    .tagline-item { font-size: 13px; color: var(--jrm-on-dark-mid); }
    .tagline-sep  { color: var(--jrm-gold); font-size: 14px; }
    .hero-btns    { display: flex; gap: 10px; flex-wrap: wrap; }
    .hero__stats  {
      display: flex; gap: var(--space-8); margin-top: var(--space-10);
      padding-top: var(--space-6); border-top: 1px solid var(--jrm-rule-dark);
    }
    .stat__num   { font-family: var(--font-heading); font-size: 2rem; color: var(--jrm-white); line-height: 1; }
    .stat__label { font-size: var(--text-xs); color: var(--jrm-on-dark-mid); margin-top: var(--space-1); letter-spacing: .05em; }
    .hero__right {
      display: flex; flex-direction: column; align-items: center;
      gap: var(--space-4); position: relative; z-index: 2;
    }
    .geo-mark-wrap { position: relative; width: 60px; height: 60px; }
    .geo-sq1 { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border: 2.5px solid var(--jrm-gold); border-radius: 4px; }
    .geo-sq2 { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border: 2px solid var(--jrm-primary-light); border-radius: 2px; }
    .geo-dot { position: absolute; top: 13px; left: 13px; width: 7px; height: 7px; background: var(--jrm-gold-light); border-radius: 50%; }
    .cert-pill {
      width: 100%; font-size: .6875rem; font-weight: 500; text-align: center;
      padding: 5px 10px; border-radius: 4px;
      border: 1px solid rgba(196,151,58,0.3); color: var(--jrm-gold-light);
      background: rgba(196,151,58,0.06); letter-spacing: .04em;
    }
    .cert-strip {
      background: var(--jrm-forest-mid); padding: 11px var(--space-6);
      display: flex; align-items: center; gap: var(--space-3);
      border-top: 1px solid rgba(255,255,255,0.09); flex-wrap: wrap;
    }
    .cert-strip__label { font-size: .6875rem; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; }
    .cert-strip__chip  { font-size: .6875rem; font-weight: 500; padding: 2px 9px; border-radius: 3px; background: rgba(90,168,82,0.15); color: #9FE1CB; letter-spacing: .04em; }
    .strip-divider { width: 1px; height: 12px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

    /* Servicios */
    .section__header { margin-bottom: 2.5rem; }
    .card { background: var(--jrm-surface); border: 0.5px solid var(--jrm-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
    .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .card--top-green { border-top: 2px solid var(--jrm-primary); }
    .card--top-gold  { border-top: 2px solid var(--jrm-gold); }
    .card__icon  { font-size: 22px; margin-bottom: var(--space-4); }
    .card__title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--jrm-ink); margin-bottom: var(--space-2); }
    .card__text  { font-size: var(--text-sm); color: var(--jrm-text-sec); line-height: 1.7; }

    /* Productos — SaaS destacado */
    .saas-card {
      background: var(--jrm-forest); border-radius: var(--radius-lg);
      padding: var(--space-8); position: relative; overflow: hidden;
    }
    .saas-card::after {
      content: ''; position: absolute; bottom: -30px; right: -30px;
      width: 140px; height: 140px; border: 16px solid rgba(196,151,58,0.06);
      border-radius: 12px; pointer-events: none;
    }
    .saas-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      padding: 4px 12px; border-radius: var(--radius-full);
      border: 1px solid rgba(196,151,58,0.4); color: var(--jrm-gold-light);
      background: rgba(196,151,58,0.08); margin-bottom: var(--space-4);
    }
    .saas-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jrm-primary-bright); }
    .saas-badge--dev { color: var(--jrm-on-dark-mid); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
    .saas-badge--dev .saas-badge__dot { background: var(--jrm-on-dark-faint); }
    .saas-card__title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--jrm-white); margin-bottom: var(--space-2); }
    .saas-card__client { font-size: var(--text-xs); color: var(--jrm-gold-light); font-weight: 600; margin-bottom: var(--space-3); letter-spacing: .03em; }
    .saas-card__text { font-size: var(--text-sm); color: var(--jrm-on-dark-mid); line-height: 1.75; margin-bottom: var(--space-5); position: relative; z-index: 1; }
    .saas-card__tags { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }

    /* Productos — Apps móviles */
    .app-card { background: var(--jrm-surface); border: 0.5px solid var(--jrm-border); border-radius: var(--radius-lg); padding: var(--space-6); transition: transform var(--transition), box-shadow var(--transition); }
    .app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .app-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
    .app-card__icon { font-size: 22px; }
    .app-badge { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-full); background: var(--jrm-gold-pale); color: #7A5A1A; }
    .app-card__title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--jrm-ink); margin-bottom: var(--space-2); }
    .app-card__text { font-size: var(--text-sm); color: var(--jrm-text-sec); line-height: 1.7; }

    /* Animación al hacer scroll */
    .fade-in-scroll { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .fade-in-scroll.is-visible { opacity: 1; transform: translateY(0); }

    /* Flagship — Desarrollo Express */
    .flagship {
      background: linear-gradient(135deg, var(--jrm-forest) 0%, var(--jrm-forest-mid) 100%);
      padding: var(--space-12) var(--space-6); position: relative; overflow: hidden;
    }
    .flagship::before {
      content: ''; position: absolute; top: -60px; left: -60px;
      width: 220px; height: 220px; border: 24px solid rgba(196,151,58,0.06);
      border-radius: 20px; pointer-events: none;
    }
    .flagship__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items: center; }
    .flagship__badge {
      display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase; color: var(--jrm-forest);
      background: var(--jrm-gold-light); padding: 5px 14px; border-radius: var(--radius-full);
      margin-bottom: var(--space-4);
    }
    .flagship__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--jrm-white); margin-bottom: var(--space-3); line-height: 1.2; }
    .flagship__text { font-size: var(--text-base); color: var(--jrm-on-dark-mid); line-height: 1.75; margin-bottom: var(--space-6); max-width: 480px; }
    .flagship__proof { font-size: var(--text-xs); color: var(--jrm-gold-light); margin-top: var(--space-3); letter-spacing: .02em; }
    .flagship__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .flagship__stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--space-5); }
    .flagship__stat-num { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--jrm-gold-light); margin-bottom: 2px; }
    .flagship__stat-label { font-size: var(--text-xs); color: var(--jrm-on-dark-mid); line-height: 1.5; }
    @media (max-width: 768px) {
      .flagship__inner { grid-template-columns: 1fr; }
      .flagship__stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    }

    /* Encabezado de páginas internas (no-Home) */
    .page-header {
      background: var(--jrm-forest); padding: var(--space-10) var(--space-6) var(--space-8);
      position: relative; overflow: hidden;
    }
    .page-header::before {
      content: ''; position: absolute; top: -30px; right: 40px;
      width: 100px; height: 100px; border: 16px solid rgba(196,151,58,0.06); border-radius: 6px;
    }
    .page-header__inner { position: relative; z-index: 1; }
    .page-header__title { font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--jrm-white); margin-bottom: var(--space-2); }
    .page-header__sub { font-size: var(--text-base); color: var(--jrm-on-dark-mid); max-width: 560px; margin: 0; }

    /* Resumen / teaser (Home) */
    .teaser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
    .teaser-more { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jrm-primary); text-decoration: none; white-space: nowrap; }
    .teaser-more:hover { color: var(--jrm-ink); }
    .cta-band { background: var(--jrm-forest-mid); padding: var(--space-10) var(--space-6); text-align: center; }
    .cta-band__title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--jrm-white); margin-bottom: var(--space-3); }
    .cta-band__text { color: var(--jrm-on-dark-mid); max-width: 480px; margin: 0 auto var(--space-6); }

    /* Micro-animaciones */
    @keyframes jrm-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(107,189,90,0.5); }
      50% { box-shadow: 0 0 0 5px rgba(107,189,90,0); }
    }
    .saas-badge__dot { animation: jrm-pulse 2s ease-in-out infinite; }

    @keyframes jrm-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-10px) rotate(2deg); }
    }
    .flagship__deco { position: absolute; z-index: 0; pointer-events: none; opacity: 0.5; }
    .flagship__deco--1 { top: 10%; right: 8%; animation: jrm-float 7s ease-in-out infinite; }
    .flagship__deco--2 { bottom: 8%; right: 20%; animation: jrm-float 9s ease-in-out infinite reverse; }

    .app-card__icon { display: inline-block; transition: transform .35s ease; }
    .app-card:hover .app-card__icon { transform: scale(1.15) rotate(-6deg); }

    /* Formulario de contacto */
    .contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; text-align: left; }
    @media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }
    .form-card { background: var(--jrm-surface); border: 1px solid var(--jrm-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); }
    .form-group { margin-bottom: var(--space-5); }
    .form-label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jrm-ink); margin-bottom: var(--space-2); }
    .form-input, .form-textarea, .form-select {
      width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--jrm-text);
      background: var(--jrm-cream); border: 1.5px solid var(--jrm-border); border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4); transition: border-color var(--transition), background-color .25s ease, color .25s ease;
    }
    .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--jrm-primary); background: var(--jrm-surface); }
    .form-textarea { min-height: 130px; resize: vertical; font-family: var(--font-body); }
    .form-hidden { position: absolute; left: -9999px; opacity: 0; height: 0; }
    .form-submit { width: 100%; justify-content: center; border: none; cursor: pointer; font-size: var(--text-sm); padding: var(--space-4); }
    .contact-info { display: flex; flex-direction: column; gap: var(--space-3); }
    .contact-note { font-size: var(--text-sm); color: var(--jrm-text-sec); line-height: 1.7; margin-top: var(--space-2); }

    /* Timeline */
    .timeline { position: relative; padding-left: 28px; margin-top: 2rem; }
    .timeline::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 0; width: 2px; background: rgba(58,125,53,0.2); }
    .tl-item { position: relative; margin-bottom: 36px; }
    .tl-item::before { content: ''; position: absolute; left: -35px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #3A7D35; border: 3px solid var(--jrm-cream); box-shadow: 0 0 0 2px #3A7D35; }
    .tl-period { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jrm-primary); margin-bottom: 3px; }
    .tl-role { font-family: var(--font-heading); font-size: 18px; color: var(--jrm-ink); font-weight: 600; margin-bottom: 2px; }
    .tl-org  { font-size: 13px; color: var(--jrm-text-muted); margin-bottom: 8px; }
    .tl-bullets { font-size: 13px; color: var(--jrm-text-sec); line-height: 1.75; }
    .tl-bullets li { margin-bottom: 3px; }

    /* Gráfica — nivel de dominio por área */
    .skill-bars { display: flex; flex-direction: column; gap: var(--space-5); }
    .skill-bar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
    .skill-bar__name { font-size: var(--text-sm); font-weight: 600; color: var(--jrm-white); }
    .skill-bar__pct  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--jrm-gold-light); }
    .skill-bar__track { height: 8px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); overflow: hidden; }
    .skill-bar__fill {
      height: 100%; width: 0; border-radius: var(--radius-full);
      background: linear-gradient(90deg, var(--jrm-primary-light), var(--jrm-gold-light));
      transition: width 1.1s cubic-bezier(.16,.84,.44,1);
    }
    .skill-bar.is-visible .skill-bar__fill { width: var(--pct); }

    /* Certs dark */
    .skill-cat-title { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--jrm-gold-light); margin-bottom: 12px; }
    .skill-tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .skill-tag { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
    .cert-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); transition: background var(--transition); }
    .cert-card:hover { background: rgba(255,255,255,0.08); }
    .cert-card__badge { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jrm-gold-light); padding: 2px 9px; border: 1px solid rgba(196,151,58,0.4); border-radius: 999px; display: inline-block; margin-bottom: var(--space-2); }
    .cert-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--jrm-white); }
    .cert-card__sub  { font-size: var(--text-xs); color: var(--jrm-on-dark-mid); margin-top: 2px; }

    /* Contact */
    .contact-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--jrm-surface); border: 1px solid var(--jrm-border); border-radius: 10px; text-decoration: none; transition: all .2s; }
    .contact-item:hover { border-color: var(--jrm-primary); box-shadow: 0 4px 12px rgba(58,125,53,0.12); }
    .contact-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--jrm-mist); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .contact-label { font-size: 10px; font-weight: 700; color: var(--jrm-text-muted); letter-spacing: .1em; text-transform: uppercase; }
    .contact-value { font-size: 14px; font-weight: 500; color: var(--jrm-text); }

    /* Footer grid */
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
    @media (max-width: 768px) {
      .footer-grid { grid-template-columns: 1fr; }
      .hero { grid-template-columns: 1fr; }
      .hero__right { display: none; }
      .nav__links { display: none; }
      .hero__stats { gap: var(--space-5); flex-wrap: wrap; }
    }

    /* ── DINAMISMO (sesión 2) ── */

    /* Barra de progreso de scroll */
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--jrm-primary), var(--jrm-gold));
      z-index: 999; transition: width .1s linear; pointer-events: none;
    }

    /* Entrada escalonada del Hero / encabezados de página */
    .hero-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
    .hero-reveal.is-revealed { opacity: 1; transform: translateY(0); }

    /* Patrón geométrico de fondo sutil (Hero, Flagship, encabezados internos) */
    .hero {
      background-color: var(--jrm-forest);
      background-image: radial-gradient(rgba(232,192,106,0.07) 1px, transparent 1.4px);
      background-size: 22px 22px;
    }
    .flagship {
      background-image: radial-gradient(rgba(232,192,106,0.06) 1px, transparent 1.4px),
                         linear-gradient(135deg, var(--jrm-forest) 0%, var(--jrm-forest-mid) 100%);
      background-size: 22px 22px, auto;
    }
    .page-header {
      background-color: var(--jrm-forest);
      background-image: radial-gradient(rgba(232,192,106,0.06) 1px, transparent 1.4px);
      background-size: 22px 22px;
    }

    /* Elementos decorativos flotando suavemente */
    .hero::before { animation: jrm-float 8s ease-in-out infinite; }
    .hero::after  { animation: jrm-float 10s ease-in-out infinite reverse; }
    .page-header::before { animation: jrm-float 9s ease-in-out infinite; }

    /* Micro-interacciones de hover en cards: ícono + subrayado dorado */
    .card { transition: transform var(--transition), box-shadow var(--transition), background-color .25s ease, border-color .25s ease; }
    .card__icon { display: inline-block; transition: transform .3s ease; }
    .card__icon svg { display: block; }
    .card:hover .card__icon { transform: translateY(-3px) scale(1.08); }
    .card__title { position: relative; display: inline-block; }
    .card__title::after {
      content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
      background: var(--jrm-gold); transform: scaleX(0); transform-origin: left;
      transition: transform .3s ease;
    }
    .card:hover .card__title::after { transform: scaleX(1); }