@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
/* ============================================================================
   Panal landings — BASE compartida.
   La enlazan TODAS las landings. Contiene: tokens, reset, tipografía, logo,
   primitivas (botones, campos, nav, footer, utilidades). Lo ÚNICO de cada
   landing va en su propio archivo (home.css, captador.css, software.css…),
   que se enlaza DESPUÉS de esta base. Nada único vive acá.
   Tipografía: system font de Apple (San Francisco en Mac/iOS = la de apple.com);
   Inter como fallback web en Windows/Android.
   ============================================================================ */
:root {
  --brand: #facc15;      /* amarillo del agente */
  --brand-2: #eab308;
  --brand-soft: #fffaeb;
  --ink: #101828;        /* gray-900 */
  --ink-2: #1d2939;      /* gray-800 */
  --muted: #667085;      /* gray-500 */
  --muted-2: #98a2b3;    /* gray-400 */
  --line: #e4e7ec;       /* gray-200 */
  --soft: #f9fafb;       /* gray-50 */
  --white: #fff;
  --ok: #12b76a;
  --err: #d92d20;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 12px 32px -8px rgba(16,24,40,.12);
  --shadow-lg: 0 24px 56px -12px rgba(16,24,40,.18);
  --r: 14px;
  --r-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Layout */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
@media (max-width: 720px){ .section { padding: 56px 0; } }
.center { text-align: center; }

/* Tipografía */
h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 700; line-height: 1.1; }
.display { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); background: var(--brand-soft); padding: 6px 12px; border-radius: 999px; }
.lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); }
.muted { color: var(--muted); }

/* Logo de marca Panal (caja amarilla + hexágono blanco + wordmark) */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); display: grid; place-items: center; box-shadow: var(--shadow); flex: none; }
.brand .mark svg { width: 19px; height: 19px; color: #fff; }
.brand .word { font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -.03em; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; border: 0; border-radius: 999px; padding: 13px 26px; transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; }
.btn-primary { background: var(--brand); color: var(--ink); box-shadow: 0 6px 18px -6px rgba(250,204,21,.7); }
.btn-primary:hover { background: var(--brand-2); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--muted-2); }
.btn.block { width: 100%; padding: 15px; }

/* Nav (barra superior común) */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.nav .inner { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.nav .links { display: flex; align-items: center; gap: 26px; }
.nav .links a { font-size: 14.5px; font-weight: 500; color: var(--muted); }
.nav .links a:hover { color: var(--ink); }
@media (max-width: 720px){ .nav .links a:not(.btn){ display: none; } }

/* Card genérica */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.card.pad { padding: 28px; }

/* Campos de formulario (compartidos) */
.field { margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
label .opt { color: var(--muted-2); font-weight: 500; }
input, select, textarea { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); transition: border .12s, box-shadow .12s; }
input::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(250,204,21,.22); }
select:disabled { background: var(--soft); color: var(--muted-2); }
.hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.err { color: var(--err); font-size: 13.5px; margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .grid2 { grid-template-columns: 1fr; } }

/* Grillas utilitarias */
.cols { display: grid; gap: 20px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px){ .cols-3, .cols-2 { grid-template-columns: 1fr; } }

/* Footer común */
/* Footer estilo Apple (claro, texto chico) */
footer { background: #f5f5f7; color: #6e6e73; padding: 44px 0 28px; margin-top: 0; }
footer .cols { grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px){ footer .cols { grid-template-columns: 1fr; } }
footer .brand { margin-bottom: 10px; }
footer .brand .word { color: #1d1d1f; }
footer h4 { color: #1d1d1f; font-size: 12px; margin-bottom: 10px; font-weight: 600; }
footer a, footer p { color: #6e6e73; font-size: 12.5px; display: block; margin-bottom: 8px; line-height: 1.45; }
footer a:hover { color: #1d1d1f; }
footer .bottom { border-top: 1px solid #d2d2d7; margin-top: 32px; padding-top: 18px; font-size: 12px; color: #86868b; }