/* base.css — sistema visual compartido de la landing KeyFarma.
   Tokens + base + .wrap + botones + cabecera (topbar) + pie (footer).
   Lo enlazan las páginas server-rendered (p.ej. modulo.php) para que la
   cabecera y el pie sean IDÉNTICOS a los de index.html. Los valores están
   tomados 1:1 de index.html; mantener sincronizado si allí se cambian. */

:root{
  --ink:#04130c;
  --ink-2:#0a2418;
  --ink-3:#0f2e20;
  --brand:#03cc5a;
  --brand-2:#07a34b;
  --brand-3:#0b6c3c;
  --mint:#8ef7b6;
  --lime:#c9fbdd;
  --paper:#f5faf7;
  --paper-2:#eef6f1;
  --line:#dbe8e0;
  --line-2:#e8f1ec;
  --text:#0c1c14;
  --text-2:#2b3d33;
  --muted:#5e7168;
  --shadow:0 24px 70px rgba(6,26,17,.14);
  --shadow-soft:0 12px 34px rgba(6,26,17,.08);
  --radius:22px;
  --radius-sm:14px;
  --max:1200px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Space Grotesk",var(--font);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--font);background:var(--paper);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600}
.wrap{width:min(var(--max),calc(100% - 44px));margin:0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;font-family:var(--display);font-weight:600;font-size:15px;
  border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.18s ease;
  white-space:nowrap;line-height:1}
.btn.primary{background:var(--brand);color:#03231a;box-shadow:0 14px 30px rgba(3,204,90,.32)}
.btn.primary:hover{transform:translateY(-2px);background:#04dd63;box-shadow:0 18px 38px rgba(3,204,90,.4)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand-3);transform:translateY(-2px)}
.btn.on-dark{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.16)}
.btn.on-dark:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);
  background:rgba(245,250,247,.82);border-bottom:1px solid var(--line-2)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:180px}
.brand img{width:200px;height:auto}
.links{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.links a{opacity:.85;transition:.15s}
.links a:hover{color:var(--brand-3);opacity:1}
.links a[aria-current="page"]{opacity:1;color:var(--brand-3);border:1px solid rgba(3,204,90,.35);background:rgba(201,251,221,.5);border-radius:999px;padding:6px 13px}
.links a[aria-current="page"]:hover{color:var(--brand-3)}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-cta{display:none}
.hamb{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.hamb span,.hamb span::before,.hamb span::after{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;content:"";position:relative}
.hamb span::before{position:absolute;top:-6px}.hamb span::after{position:absolute;top:6px}
/* Menú desplegable "Partners" (fallback sin JS; con JS lo reemplaza menu.js) */
.dropdown{position:relative;display:inline-flex;flex-direction:column}
.drop-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--text-2);opacity:.85;cursor:pointer;padding:0}
.drop-toggle:hover{color:var(--brand-3);opacity:1}
.drop-toggle .caret{transition:transform .18s ease}
.dropdown.open .drop-toggle .caret{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 14px);left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);padding:8px;display:none;flex-direction:column;gap:1px;z-index:60}
.dropdown.open .drop-menu{display:flex}
@media (hover:hover) and (min-width:1041px){ .dropdown:hover .drop-menu{display:flex} }
.drop-menu a{padding:10px 12px;border-radius:9px;font-size:14px;opacity:1;color:var(--text-2);white-space:nowrap}
.drop-menu a:hover{background:var(--paper-2);color:var(--brand-3)}
.drop-menu .sep{height:1px;background:var(--line-2);margin:6px 6px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#a9c2b5;padding:52px 0 34px}
footer .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .foot img{margin-bottom:14px}
footer .foot p{color:#8fae9f;font-size:14px;max-width:42ch}
footer .foot h3{color:#fff;font-size:14px;margin:0 0 14px;letter-spacing:.01em}
footer .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;color:#9fbdae}
footer .foot ul a:hover{color:var(--mint)}
footer .made{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:#7f9c8e}
footer .made a:hover{color:var(--mint)}
footer .legal-links a{color:#9fbdae}

/* ---------- responsive (cabecera/pie) ---------- */
@media (max-width:1040px){
  .links{display:none}.hamb{display:flex}
  .links.open{display:flex;position:absolute;left:22px;right:22px;top:78px;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-soft)}
  .links.open .menu-cta{display:inline-flex}
  /* En móvil el desplegable se abre en acordeón dentro del menú */
  .dropdown{width:100%}
  .drop-toggle{width:100%;justify-content:space-between;padding:2px 0}
  .drop-menu{position:static;box-shadow:none;border:none;border-left:2px solid var(--line-2);border-radius:0;min-width:0;width:100%;padding:4px 0 4px 12px;margin-top:6px}
  footer .foot{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .wrap{width:min(100% - 28px,var(--max))}
  .nav{height:66px}.brand img{width:168px}.nav-cta .btn:not(.hamb){display:none}
  .links.open .menu-cta{display:inline-flex;width:100%;justify-content:center;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}