/* ══════════════════════════════════════
   JANICK S.A.S. — shared.css
   janickec.com · Puyango, Loja, Ecuador
   ══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bd: #0D2A6B;
  --bm: #1A4EBD;
  --bt: #1E7AE0;
  --cy: #00B4D8;
  --cyl: #48CAE4;
  --w: #FFFFFF;
  --off: #F4F7FC;
  --gl: #E8EEF8;
  --td: #0A1A3A;
  --tm: #2D4070;
  --tmuted: #607090;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--off);
  color: var(--td);
  min-height: 100vh;
}

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 66px;
  background: var(--w);
  border-bottom: 1px solid var(--gl);
  box-shadow: 0 2px 20px rgba(13,42,107,0.07);
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 42px; width: auto; object-fit: contain; }
.logo-label { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600; color: var(--tmuted); letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--tm); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--bt); }
.nav-links a.active { border-bottom: 2px solid var(--cy); padding-bottom: 2px; }
.nav-cta { background: linear-gradient(90deg, var(--bm), var(--cy)); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.03em; text-decoration: none; transition: opacity 0.2s; }
.nav-cta:hover { opacity: 0.88; }

/* ── HERO PILL ── */
.hero-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,180,216,0.13); border: 1px solid rgba(0,180,216,0.3); color: var(--cyl); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 18px; border-radius: 20px; margin-bottom: 20px; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 8px var(--cy); flex-shrink: 0; }

/* ── SECTIONS ── */
.sec { padding: 56px 40px; }
.sec-white { background: var(--w); }
.sec-off { background: var(--off); }
.sec-inner { max-width: 900px; margin: 0 auto; }

.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bt); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 20px; height: 2px; background: linear-gradient(90deg, var(--bt), var(--cy)); border-radius: 2px; flex-shrink: 0; }
.sec-title { font-family: 'Rajdhani', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--bd); margin-bottom: 12px; line-height: 1.15; }
.sec-sub { font-size: 14px; font-weight: 300; color: var(--tmuted); line-height: 1.8; max-width: 580px; margin-bottom: 36px; }

/* ── BUTTONS ── */
.btn-main { background: linear-gradient(90deg, var(--cy), #48CAE4); color: var(--bd); border: none; padding: 15px 32px; border-radius: 9px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.04em; text-decoration: none; transition: opacity 0.2s, transform 0.15s; display: inline-block; }
.btn-main:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 15px 32px; border-radius: 9px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-ghost:hover { background: rgba(255,255,255,0.07); }
.btn-white { background: #fff; color: var(--bd); border: none; padding: 14px 30px; border-radius: 9px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; text-decoration: none; transition: opacity 0.2s; }
.btn-white:hover { opacity: 0.9; }

/* ── CTA BAND ── */
.cta-band { background: linear-gradient(120deg, var(--bd), var(--bt)); padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.cta-band p { font-size: 14px; color: rgba(255,255,255,0.58); font-weight: 300; }

/* ── FOOTER ── */
footer { background: var(--bd); padding: 36px 40px 24px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-logo-sub { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; }
.footer-links a { font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--cyl); }
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.25); text-align: center; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .sec { padding: 40px 20px; }
  .cta-band { padding: 32px 20px; text-align: center; justify-content: center; }
  footer { padding: 28px 20px 20px; }
  .footer-top { justify-content: center; text-align: center; }
}