/* ============================================================
   RAMBLA — TOKENS DE MARCA
   Urbana · e-bike · lifestyle. Cálida, clara, aireada, escandinava.
   Voz: "La ciudad, a tu ritmo."
   Fuente de verdad para colores, tipografía, radios y movimiento.
   ============================================================ */

:root {
  /* --- Base / superficies (crema cálido escandinavo) --- */
  --bg:        #f6f2ea;   /* crema cálido — fondo general */
  --surface:   #ffffff;   /* tarjetas y paneles */
  --surface-2: #efe9dd;   /* superficie secundaria, pastel arena */
  --text:      #26271f;   /* verde tinta casi negro */
  --muted:     #6b7065;   /* texto secundario */
  --line:      #e4ddcf;   /* bordes suaves */

  /* --- Acentos de marca --- */
  --accent:    #3f7d5f;   /* verde salvia — primario */
  --accent-2:  #e2724f;   /* terracota — CTA / energía */
  --accent-3:  #edc14b;   /* amarillo suave — highlights */

  /* --- Pasteles derivados (fondos de tarjeta alternados) --- */
  --pastel-salvia:   #e6efe7;
  --pastel-terracota:#f7e3da;
  --pastel-amarillo: #faf0d2;
  --pastel-arena:    #f0ebe0;

  /* --- Tintes de acento (estados / glow) --- */
  --accent-soft:   #d9e7df;
  --accent-2-soft: #f6dfd5;
  --accent-deep:   #2f6149;  /* verde más profundo para hovers */

  /* --- Gradientes de marca --- */
  --grad-salvia:    linear-gradient(135deg, #4a8c6c 0%, #2f6149 100%);
  --grad-calido:    linear-gradient(135deg, #faf0d2 0%, #f7e3da 100%);
  --grad-hero:      linear-gradient(150deg, #f6f2ea 0%, #efe9dd 60%, #e6efe7 100%);
  --grad-sun:       linear-gradient(120deg, #edc14b 0%, #e2724f 100%);
  --grad-leaf:      linear-gradient(160deg, #4a8c6c 0%, #2f6149 55%, #285340 100%);

  /* --- Semánticos --- */
  --bg-soft:    var(--surface-2);
  --link:       var(--accent);
  --border:     var(--line);
  --text-invert:#ffffff;

  /* --- Tipografía (Google Fonts) ---
     Display: Fraunces (serif cálida, con personalidad)  -> 600/700
     Cuerpo:  DM Sans (humanista, clara)                 -> 400/500
     Redondeada: Quicksand (acentos amigables, números)  -> 500/600/700 */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-round:   'Quicksand', system-ui, sans-serif;

  /* --- Escala tipográfica (clamp = responsive sin breakpoints) --- */
  --fs-hero:  clamp(2.6rem, 6.5vw, 5rem);
  --fs-h1:    clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h2:    clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: 0.875rem;

  /* --- Radios (MUY redondeado — firma de la marca) --- */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* --- Sombras suaves, cálidas --- */
  --shadow-xs: 0 2px 8px  rgba(38,39,31,.05);
  --shadow-sm: 0 6px 18px rgba(38,39,31,.07);
  --shadow-md: 0 16px 40px rgba(38,39,31,.10);
  --shadow-lg: 0 30px 70px rgba(38,39,31,.14);
  --shadow-salvia: 0 22px 50px rgba(47,97,73,.22);

  /* --- Movimiento --- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.34,1.2,.64,1);   /* rebote suave para "float" */
  --t-fast:    .2s;
  --t-base:    .35s;
  --t-slow:    .6s;

  /* --- Espaciado de sección --- */
  --space-section: clamp(3.5rem, 8vw, 7rem);
}

/* ============================================================
   BOTONES — todos tipo píldora, redondeados y amigables
   ============================================================ */
.btn {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--r-pill);
  padding: .85rem 1.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: transform var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn--primary   { background: var(--accent-2); color: #fff; box-shadow: 0 10px 24px rgba(226,114,79,.28); }
.btn--primary:hover   { background: #d4613d; box-shadow: 0 16px 32px rgba(226,114,79,.34); }

.btn--salvia    { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(63,125,95,.26); }
.btn--salvia:hover    { background: var(--accent-deep); box-shadow: 0 16px 32px rgba(63,125,95,.32); }

.btn--ghost     { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-xs); }
.btn--ghost:hover     { border-color: var(--accent); color: var(--accent); }

.btn--outline   { background: transparent; color: var(--text); border-color: var(--text); }
.btn--outline:hover   { background: var(--text); color: var(--bg); }

.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.0625rem; }
.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }