/* ==========================================================
   Creditaria Gamma Credit · Design tokens
   Fuente: Presentación Hipotecario, PyME y FAS 2025
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- Primitivos: Petróleo (azul primario) ---- */
  --petrol-900:#132a32;
  --petrol-800:#1b3a45;   /* bloques oscuros, footer */
  --petrol-700:#244a57;
  --petrol-600:#2e5b69;   /* color principal de marca */
  --petrol-500:#3b6e7e;
  --petrol-300:#8fb0ba;
  --petrol-100:#dfeaee;
  --petrol-50:#f2f6f8;

  /* ---- Primitivos: Turquesa (títulos) ---- */
  --teal-700:#085664;
  --teal-600:#0a6b7a;     /* títulos sobre fondo claro */
  --teal-100:#d6ecef;

  /* ---- Primitivos: Naranja (acento) ---- */
  --orange-300:#f3d1a6;   /* etiquetas sobre fondo oscuro */
  --orange-400:#e39a3c;   /* hover del botón / texto pequeño sobre oscuro */
  --orange-500:#d88110;   /* NARANJA OFICIAL DE MARCA (sólido, sin degradados) */
  --orange-600:#b96c0c;   /* naranja oscuro */
  --orange-700:#a35f0a;   /* texto pequeño sobre blanco (AA 5:1) */
  --orange-50:#fcf3e7;

  /* ---- Neutros ---- */
  --white:#ffffff;
  --gray-50:#f4f6f7;
  --gray-200:#dde3e6;
  --gray-500:#66757b;
  --gray-800:#22323a;     /* texto de cuerpo */

  /* ---- Semánticos ---- */
  --color-primary:var(--petrol-600);
  --color-primary-dark:var(--petrol-800);
  --color-heading:var(--teal-600);
  --color-accent:var(--orange-500);
  --color-accent-hover:var(--orange-400);
  --color-on-accent:var(--petrol-900);   /* texto sobre naranja: contraste AA */
  --color-text:var(--gray-800);
  --color-text-muted:var(--gray-500);
  --color-bg:var(--white);
  --color-bg-soft:var(--gray-50);
  --color-border:var(--gray-200);
  --color-on-dark:#ffffff;
  --color-on-dark-muted:#c3d4da;

  --gradient-petrol:linear-gradient(90deg,var(--petrol-800) 0%,var(--petrol-600) 100%);

  /* ---- Tipografía ---- */
  --font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --fs-display:clamp(2.5rem,5vw,4.1rem);
  --fs-h1:clamp(2rem,3.6vw,2.8rem);
  --fs-h2:clamp(1.9rem,3.4vw,2.85rem);
  --fs-h3:1.25rem;
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-caption:.75rem;
  --lh-tight:1.15;
  --lh-body:1.65;
  --ls-body:.01em;
  --ls-eyebrow:.14em;
  --ls-heading:-.025em;   /* títulos más compactos y actuales */

  /* ---- Espaciado (base 4px) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  /* ---- Formas ---- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* ---- Sombras ---- */
  --shadow-sm:0 2px 8px rgba(19,42,50,.08);
  --shadow-md:0 10px 28px rgba(19,42,50,.12);
  --shadow-lg:0 18px 44px rgba(19,42,50,.18);

  /* ---- Layout ---- */
  --container:1180px;
  --header-h:80px;
}

/* ==========================================================
   Componentes base reutilizables
   ========================================================== */

/* Botones: píldora; la flecha va dentro de un círculo (.arrow) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border-radius:var(--radius-pill);
  font-family:var(--font-family);font-weight:var(--fw-semibold);font-size:.95rem;border:1.5px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap}
.btn:has(.arrow){padding-right:7px}
.btn .arrow{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--petrol-900);color:var(--white);transition:transform .25s ease}
.btn:hover .arrow{transform:rotate(-45deg)}
.btn-secondary .arrow,.btn-ghost .arrow{background:var(--color-accent);color:var(--color-on-accent)}
.btn-outline .arrow{background:var(--white);color:var(--petrol-900)}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--color-primary);color:var(--white)}
.btn-secondary:hover{background:var(--color-primary-dark)}
.btn-outline{border-color:var(--white);color:var(--white);background:transparent}
.btn-outline:hover{background:var(--white);color:var(--color-primary-dark)}
.btn-ghost{border-color:var(--color-primary);color:var(--color-primary);background:transparent}
.btn-ghost:hover{background:var(--color-primary);color:var(--white)}

/* Título a dos tonos: "Productos <span>PyME</span>" */
.title-duo{color:var(--color-heading);font-weight:var(--fw-semibold);line-height:1.1;letter-spacing:var(--ls-heading)}
.title-duo span{color:var(--orange-500)}

/* Cuadro naranja decorativo, firma visual de la marca */
.accent-square{display:inline-block;width:38px;height:38px;background:var(--color-accent);transform:rotate(-4deg);box-shadow:var(--shadow-sm)}

/* Etiqueta de sección: píldora con borde y punto naranja */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--white);
  color:var(--petrol-700);font-weight:var(--fw-semibold);font-size:.8rem;letter-spacing:.01em}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-accent)}

/* Lista con punto naranja */
.dot-list{list-style:none}
.dot-list li{position:relative;padding:4px 0 4px 18px;letter-spacing:var(--ls-body)}
.dot-list li::before{content:"";position:absolute;left:2px;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}

/* Banda de título (como "Nosotros" en el PDF) */
.band{background:var(--petrol-700);color:var(--white);padding:var(--space-5) var(--space-6);position:relative}
.band::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:60%;background:var(--color-accent)}