/* ============================================================
   renovarte-marca.css · Integración del libro de marca v1
   Sobrescribe los tokens del sitio con la identidad definitiva:
   cobalto #2742A8 · teja #C96342 · Hanken Grotesk + JetBrains Mono
   Cargar DESPUÉS de asesia-tokens.css y renovarte-site.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* acento de marca: cobalto */
  --acc: #2742A8;
  --acc-dim: #1F3486;
  --acc-hi: #8FA1F0;
  --acc-soft: rgba(39, 66, 168, .14);
  --acc-border: rgba(39, 66, 168, .40);
  --acc-glow: rgba(39, 66, 168, .30);

  /* secundario de marca: teja */
  --teja: #C96342;
  --teja-soft: rgba(201, 99, 66, .12);

  /* tipografía de marca */
  --font-sans: 'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* papel de marca */
  --light-bg: #FAFAF7;
}

body { font-family: var(--font-sans); }

/* kickers y etiquetas pequeñas en teja (pág. 5 del libro) */
.kicker { color: var(--teja); }

/* enlaces destacados / precio del lockup */
.calc-result .rng { color: #F0B27A; }

/* la pieza teja como detalle en chips activos */
.tipo-chip:hover { border-color: var(--teja); color: var(--teja); }

/* ============================================================
   Animaciones · reveals al hacer scroll (renovarte-anim.js)
   Respetan prefers-reduced-motion; sin animación, el contenido
   se muestra tal cual.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .7s cubic-bezier(.16, 1, .3, 1),
      transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--rv-delay, 0ms);
  }
  .rv.in { opacity: 1; transform: none; }

  /* micro-interacciones */
  .card.hov:hover { transform: translateY(-3px); }
  .btn-acc:active { transform: translateY(0) scale(.98); }
  .opt { transition: all .15s cubic-bezier(.16, 1, .3, 1); }
  .opt.on { transform: scale(1.03); }
}