:root {
  --bg: #f4f9f5;
  --surface: #ffffff;
  --surface-alt: #eefbf1;
  --border: #dde9e2;
  --text: #101d15;
  --muted: #64796c;
  --accent: #16a34a;
  --accent-hover: #128a3f;
  --accent-2: #0d9488;
  --accent-tint: #dcfce7;
  --success: #059669;
  --success-tint: #ecfdf5;
  --danger: #dc2626;
  --danger-tint: #fef2f2;

  --gradient: linear-gradient(135deg, #16a34a 0%, #15803d 55%, #0d9488 100%);
  --gradient-soft: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  --gradient-text: linear-gradient(135deg, #16a34a, #0d9488);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 29, 21, 0.05);
  --shadow: 0 1px 2px rgba(16, 29, 21, 0.04), 0 6px 16px -4px rgba(16, 29, 21, 0.08);
  --shadow-lg: 0 20px 40px -12px rgba(16, 29, 21, 0.16), 0 4px 10px -4px rgba(16, 29, 21, 0.08);
  --shadow-glow: 0 8px 24px -6px rgba(22, 163, 74, 0.35);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b120c;
    --surface: #161f16;
    --surface-alt: #1c2a1d;
    --border: #2a3a2b;
    --text: #eef6ee;
    --muted: #93a894;
    --accent: #22c55e;
    --accent-hover: #4ade80;
    --accent-2: #2dd4bf;
    --accent-tint: #16351f;
    --success: #34d399;
    --success-tint: #12261f;
    --danger: #f87171;
    --danger-tint: #2a1616;
    --gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #14b8a6 100%);
    --gradient-soft: linear-gradient(135deg, #16351f 0%, #123328 100%);
    --gradient-text: linear-gradient(135deg, #4ade80, #2dd4bf);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px -4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px -14px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 10px 28px -6px rgba(34, 197, 94, 0.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 520px at 100% -8%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent),
    radial-gradient(900px 480px at -10% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.brand-mark { width: 27px; height: 27px; flex-shrink: 0; display: block; object-fit: contain; }

.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  min-height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky;
  top: 0;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  position: relative;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar nav a:hover { color: var(--text); background: var(--surface-alt); }
.sidebar nav a.active { color: var(--accent-hover); background: var(--accent-tint); }
.sidebar nav a.active::before {
  content: "";
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: var(--radius-full);
  background: var(--gradient);
}

/* Íconos de la nav dentro de un círculo con gradiente cuando el item está
   activo (en vez de un tinte plano) — mismo espíritu que .tienda-avatar,
   llevado a un acento con más carácter. El span .nav-icono lo agrega
   base.html. */
.nav-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: 13.5px;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.sidebar nav a.active .nav-icono { background: var(--gradient); box-shadow: var(--shadow-glow); }
.sidebar nav a:hover .nav-icono { transform: scale(1.06); }

.sub-nav { display: flex; flex-direction: column; gap: 1px; margin: 0 0 2px 33px; }
.sub-nav a {
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 6px 10px; border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sub-nav a:hover { color: var(--text); background: var(--surface-alt); }
.sub-nav a.active { color: var(--accent-hover); background: var(--accent-tint); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.sidebar-footer .user-name { color: var(--muted); font-weight: 600; }
.sidebar-footer a { color: var(--muted); text-decoration: none; }
.sidebar-footer a:hover { color: var(--accent); }

.container { flex: 1; max-width: 640px; margin: 0 auto; padding: 32px 28px; }
.container.centrado { max-width: 400px; margin: 64px auto; }
.container.ancho { max-width: 960px; padding: 0; }
.container.completo { max-width: none; padding: 24px 28px; }

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%; min-height: 0; position: static; flex-direction: row;
    align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  }
  .sidebar nav { flex-direction: row; }
  .sidebar nav a.active::before { display: none; }
  .sub-nav { display: none; }
  .sidebar-footer { margin-top: 0; padding-top: 0; border-top: none; }
  .container { padding: 20px 16px; }
}

h1 { font-size: 25px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.005em; }
.subtitle { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; line-height: 1.5; }

/* Texto con degradé — para el único acento por página que de verdad
   necesita destacar (título del hero de la landing, saldo del dashboard).
   Se usa con moderación a propósito: si todo brilla, nada brilla. */
.texto-gradiente {
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 18px;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Tarjeta destacada con fondo en degradé suave — para el único bloque por
   página que merece el mayor peso visual (combo de módulos, saldo de
   créditos). El resto de las tarjetas se queda en superficie plana para
   que el acento no se diluya. */
.card.destacada {
  background: var(--gradient-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 14px 0 5px; }
input, select, textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text);
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--gradient); color: #fff; border: none;
  padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; margin: 0; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16, 29, 21, 0.08);
  transition: box-shadow 0.15s var(--ease), transform 0.08s var(--ease), filter 0.15s var(--ease);
}
button:hover, .btn:hover { box-shadow: var(--shadow-glow); filter: brightness(1.04); }
button:active, .btn:active { transform: translateY(1px); filter: brightness(0.98); }
button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
button.secondary, .btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
button.secondary:hover, .btn.secondary:hover { background: var(--surface-alt); border-color: var(--muted); box-shadow: none; filter: none; }
button.danger, .btn.danger { background: var(--surface); color: var(--danger); border: 1px solid var(--border); box-shadow: none; }
button.danger:hover, .btn.danger:hover { background: var(--danger-tint); border-color: var(--danger); box-shadow: none; filter: none; }

form > button:last-child, form > .btn:last-child { margin-top: 16px; }

.error, .msg { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; }
.error { color: var(--danger); background: var(--danger-tint); }
.msg { color: var(--success); background: var(--success-tint); }

.row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.empty { color: var(--muted); font-size: 13.5px; }

.empty-state {
  text-align: center;
  padding: 32px 20px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.empty-state .empty-state-icono {
  width: 44px; height: 44px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--gradient-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.badge {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-hover);
  border-radius: var(--radius-full);
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* módulos */
.modulo-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.modulo-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.modulo-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); transform: translateY(-2px); }
.modulo-card.bloqueado { opacity: 0.6; }
.modulo-card.bloqueado:hover { box-shadow: var(--shadow); border-color: var(--border); transform: none; }
.modulo-titulo { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; }
.modulo-precio { font-size: 13px; color: var(--muted); font-weight: 600; }
.modulo-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

.precio-tag { font-weight: 700; color: var(--accent-hover); font-variant-numeric: tabular-nums; }

.fila-estacion.seleccionada { background: var(--accent-tint); margin: 0 -16px; padding: 10px 16px; border-radius: 8px; }

.bencina-layout { display: grid; grid-template-columns: minmax(380px, 480px) 1fr; gap: 20px; align-items: start; }
.bencina-col-lista { min-width: 0; }
.bencina-col-mapa { position: sticky; top: 24px; height: calc(100vh - 48px); min-height: 420px; }
.bencina-col-mapa .card { height: 100%; margin-bottom: 0; }
.bencina-col-mapa #mapa { height: 100%; width: 100%; }

@media (max-width: 960px) {
  .bencina-layout { grid-template-columns: 1fr; }
  .bencina-col-mapa { position: static; height: 380px; min-height: 0; order: -1; }
}

.boletas-layout { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.boletas-col-forms { display: flex; flex-direction: column; }
.boletas-col-lista { min-width: 0; }

@media (max-width: 900px) {
  .boletas-layout { grid-template-columns: 1fr; }
}

.barra-mes .barra-fill { transition: fill 0.1s; }
.barra-mes:hover .barra-fill, .barra-mes:focus .barra-fill { fill: var(--accent-hover); }
.barra-mes:focus { outline: none; }

#grafico-tooltip {
  position: fixed;
  display: none;
  z-index: 40;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
#grafico-tooltip .tooltip-valor { font-weight: 700; font-size: 13px; }
#grafico-tooltip .tooltip-etiqueta { color: var(--muted); margin-top: 1px; }

.descuentos-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.chip {
  padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); font-family: inherit;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.chip:hover { background: var(--surface-alt); color: var(--text); }
.chip.activo { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }

.descuentos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tienda-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
  display: block; text-decoration: none; color: inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease);
}
.tienda-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tienda-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.tienda-logo {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-alt); border: 1px solid var(--border);
  object-fit: contain; padding: 6px;
}

.tienda-card-wrap { position: relative; }
.tienda-fav-form { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 2; }
.tienda-fav-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0; margin: 0; color: var(--muted);
  transition: border-color 0.12s var(--ease), color 0.12s var(--ease), transform 0.12s var(--ease);
}
.tienda-fav-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.tienda-card-wrap[data-favorito="true"] .tienda-fav-btn { color: var(--accent); border-color: var(--accent); }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-tile {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 18px 16px;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease);
}
/* Barra de acento en degradé arriba de la tarjeta — con pseudo-elemento en
   vez de border-image, porque mezclar border-image con distinto grosor
   por lado (3px arriba, 1px al resto) rompe el miter de las esquinas. */
.stat-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-valor { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 15px; font-weight: 500; color: var(--muted); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.admin-tabla { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.admin-tabla th {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.admin-tabla tr:last-child td { border-bottom: none; }
.admin-tabla tbody tr { transition: background 0.1s var(--ease); }
.admin-tabla tbody tr:hover { background: var(--surface-alt); }

.tienda-highlights {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 5px;
}
.tienda-highlights li {
  font-size: 12px; color: var(--text); padding-left: 14px; position: relative;
}
.tienda-highlights li::before {
  content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}

.descuentos-columnas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; align-items: start;
}
.columna-tipo {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.columna-tipo h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; }

.mapa-pin {
  background: var(--gradient);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-10px);
}
.mapa-pin-destacado {
  background: #fff; color: var(--accent-hover); border: 2px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), var(--shadow-glow);
  font-size: 12px;
}

/* Envoltorio del widget de autocompletado de direcciones (Google Places) —
   el componente es un web component (gmp-place-autocomplete) que ocupa el
   ancho del contenedor; se le dan las mismas variables de color que usan
   los inputs normales para que no desentone. */
.chip-favorito {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--text);
}
.chip-favorito a { text-decoration: none; font-size: 11px; color: var(--muted); }
.chip-favorito a:hover { color: var(--danger); }

.lugar-elegido { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.lugar-elegido a { color: var(--accent); font-weight: 600; text-decoration: none; }
.lugar-elegido a:hover { text-decoration: underline; }

.lugar-autocomplete { width: 100%; }
.lugar-autocomplete gmp-place-autocomplete {
  width: 100%;
  --gmpx-color-surface: var(--surface);
  --gmpx-color-on-surface: var(--text);
  --gmpx-color-on-surface-variant: var(--muted);
  --gmpx-color-primary: var(--accent);
  --gmpx-font-family-base: inherit;
  --gmpx-font-size-base: 14px;
}

/* Bencina: insignia de marca (logo real si conocemos el dominio oficial,
   inicial con degradé si no — mismo par img/fallback que .tienda-logo/
   .tienda-avatar en Descuentos, ya probado) y grilla de precios por tipo
   de combustible en vez de una fila de texto plano. */
.marca-logo {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border);
  object-fit: contain; padding: 5px;
}
.marca-badge {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff; background: var(--gradient);
}

.precio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; margin-top: 10px; max-width: 320px; }
.precio-chip {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 4px; text-align: center; line-height: 1.3;
}
.precio-chip-tipo { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.precio-chip-valor { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.precio-chip.mas-barato { background: var(--accent-tint); border-color: var(--accent); }
.precio-chip.mas-barato .precio-chip-valor { color: var(--accent-hover); }
.precio-chip.mas-barato .precio-chip-tipo { color: var(--accent-hover); }

/* Ruta óptima */
.ruta-candidata {
  display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s var(--ease);
}
.ruta-candidata:last-child { border-bottom: none; }
.ruta-candidata:hover { background: var(--surface-alt); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); }
.ruta-candidata-rank {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--surface-alt); color: var(--muted);
}
.ruta-candidata:first-child .ruta-candidata-rank { background: var(--gradient); color: #fff; }
.ruta-corredor-badge { font-size: 10.5px; color: var(--muted); }

/* landing pública */
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; border-bottom: 1px solid var(--border);
}
.landing-hero {
  text-align: center; padding: 88px 28px 64px;
}
.landing-hero h1 {
  font-size: 44px; line-height: 1.12; margin: 0 0 16px; letter-spacing: -0.025em; font-weight: 800;
}
.landing-hero .lead {
  font-size: 17.5px; color: var(--muted); max-width: 540px; margin: 0 auto 30px; line-height: 1.55;
}
.landing-section { padding: 0 28px 64px; }
.landing-section h2 { text-align: center; font-size: 24px; margin: 0 0 28px; letter-spacing: -0.015em; }
.landing-modulo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
@media (max-width: 720px) {
  .landing-hero { padding: 60px 24px 48px; }
  .landing-hero h1 { font-size: 31px; }
  .landing-modulo-grid { grid-template-columns: 1fr; }
  .landing-nav { padding: 16px 20px; }
}